ContrastKit 是一个 Swift 库，旨在简化 iOS、iPadOS、macOS 和 tvOS 应用程序中的颜色对比度处理。
它为开发者提供工具，可以从任何基础颜色自动生成色调，并根据既定的可访问性标准（AA Large、AA 和 AAA）确定最具可读性的对比色。
此软件包对于注重应用程序可访问性和可读性的 UI/UX 设计师和开发者尤其有用。
ContrastKit 软件包使用 Swift Package Manager (SPM) 来简化添加过程。按照以下步骤将其添加到您的项目中
- 在 Xcode 中，点击
File -> Swift Packages -> Add Package Dependency。 - 在搜索栏中，输入
https://github.com/markbattistella/ContrastKit并点击Next。 - 指定您想要使用的版本。您可以选择确切的版本，使用最新版本，或设置版本范围，然后点击
Next。 - 最后，选择您想要使用
ContrastKit的目标，然后点击Finish。
记得导入 ContrastKit 模块
import ContrastKit
ContrastKit 软件包的默认用法非常简单。这是一个例子
import ContrastKit
// Example usage in SwiftUI
let baseColor = Color.purple
let shadeColor = baseColor.level(.level100)
let contrastColor = shadeColor.highestRatedContrastLevel
let fixedContrastColor = shadeColor.aaLargeContrastLevel
// Example usage in UIKit
let uiColor = UIColor(contrastColor) // Convert from SwiftUI Color to UIColor
主要的调用点是为 SwiftUI 设计的 - 但您也可以调用 UIColor(color:)。
注意
使用 UIColor(color:) 自 iOS 14.0+、Mac Catalyst 14.0+、tvOS 14.0+、watchOS 7.0+、visionOS 1.0+、Xcode 12.0+ 起可用，所以我希望我们没问题...
import SwiftUI
import ContrastKit
struct ContentView: View {
private let baseColor = Color.green
private let contrastColor = baseColor.highestRatedContrastLevel
var body: some View {
Text("High Contrast Text")
.foregroundColor(contrastColor)
.background(baseColor)
}
}
或者如果您想在 UI 中选择特定的色调（假设您已经构建了一个一致的主题）
import SwiftUI
import ContrastKit
struct ContentView: View {
private let baseColor = Color.green
var body: some View {
Text("Set themed text")
.foregroundColor(baseColor)
.background(baseColor.level50)
}
}
import UIKit
import ContrastKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
let baseUIColor = UIColor.systemBlue
let contrastKitColor = Color(baseUIColor)
let highContrastUIColor = UIColor(contrastKitColor.highestRatedContrastLevel)
let label = UILabel()
label.text = "High Contrast Label"
label.textColor = highContrastUIColor
label.backgroundColor = baseUIColor
label.frame = CGRect(x: 20, y: 100, width: 300, height: 50)
label.textAlignment = .center
self.view.addSubview(label)
}
}
import AppKit
import ContrastKit
class ViewController: NSViewController {
override func loadView() {
self.view = NSView()
let baseNSColor = NSColor.systemRed
let contrastKitColor = Color(baseNSColor)
let highContrastNSColor = NSColor(contrastKitColor.highestRatedContrastLevel)
let textField = NSTextField(labelWithString: "High Contrast Text")
textField.textColor = highContrastNSColor
textField.backgroundColor = baseNSColor
textField.frame = CGRect(x: 20, y: 20, width: 300, height: 50)
textField.isBezeled = false
textField.drawsBackground = true
self.view.addSubview(textField)
}
}
ContrastKit 提供了两个核心枚举来帮助设计具有适当颜色对比度的 UI：ColorLevel 和 ContrastLevel。这些枚举帮助开发者标准化其应用程序的视觉可访问性。
ColorLevel 枚举定义了颜色的不同亮度级别，可用于从单个基础颜色生成各种色调。这些色调的范围从非常浅（接近白色）到非常深（接近黑色），适用于不同的 UI 元素，如背景、文本和交互元素。
| 级别 | 亮度 | 描述 |
|---|---|---|
level50 |
0.95 |
非常浅的色调，几乎是白色。 |
level100 |
0.90 |
非常浅的色调。 |
level200 |
0.80 |
较浅的色调，用于微妙的背景。 |
level300 |
0.70 |
浅色调，适用于悬停状态或辅助按钮。 |
level400 |
0.60 |
中等浅色调。 |
level500 |
0.50 |
中性基础色调，通常用于颜色的主要变体。 |
level600 |
0.40 |
中等深色调。 |
level700 |
0.30 |
较深色调，适合用于文本。 |
level800 |
0.20 |
非常深色调，通常用于文本或活动元素。 |
level900 |
0.10 |
非常深，接近黑色。 |
level950 |
0.05 |
极其深，几乎是黑色。 |
| 浅色模式 | 暗黑模式 |
|---|---|
 |
 |
ContrastLevel 枚举指定了三个可访问性标准的最小和最大对比度：AA Large、AA 和 AAA。这些级别基于 WCAG 指南，以确保文本和交互元素可读且易于访问。
| 级别 | 最小比率 | 最大比率 | 描述 |
|---|---|---|---|
| AA Large | 3.0 |
4.49 |
适合大文本，提供基本的可读性。 |
| AA | 4.5 |
6.99 |
正常文本大小的标准级别，提供清晰的可读性。 |
| AAA | 7.0 |
.infinity |
最高对比度级别，建议在所有上下文中实现最佳可读性。 |
如果您需要颜色随 UI 动态适应，ContrastKit 还提供可选的暗黑模式（如上图所示）。
您可以通过将 @Environment(\.colorScheme) 直接传递到 level(_:scheme:) 函数来实现。
struct EnvironmentShadeView: View {
@Environment(\.colorScheme) private var colorScheme
var body: some View {
VStack {
Color.red.level(.level100, scheme: colorScheme)
Color.red.level(.level900, scheme: colorScheme)
}
}
}
当设备切换颜色方案时，ColorLevel 将会翻转
| 级别 | 浅色模式 | 暗黑模式等效项 |
|---|---|---|
level50 |
0.95 |
0.05 |
level100 |
0.90 |
0.10 |
level200 |
0.80 |
0.20 |
level300 |
0.70 |
0.30 |
level400 |
0.60 |
0.40 |
level500 |
0.50 |
0.50 |
level600 |
0.40 |
0.60 |
level700 |
0.30 |
0.70 |
level800 |
0.20 |
0.80 |
level900 |
0.10 |
0.90 |
level950 |
0.05 |
0.95 |
PreviewTesting 文件是 ContrastKit 软件包的重要组成部分，专门用于开发过程中的调试和可视化检查目的。
它允许开发者在 SwiftUI 预览环境中快速查看和评估由库生成的对比度级别和颜色色调。
此文件包含示例视图和配置，演示了 ContrastKit 的实际应用。
该文件包含一个 Example+SwiftUI 文件，该文件利用 ContrastKit 功能来显示一系列具有不同对比度级别的颜色。这种可视化表示有助于了解不同的颜色及其各自的对比度级别在 UI 上下文中的显示效果。
有两个预览可用 - StandardShadeView 和 EnvironmentShadeView。
第一个示例中，颜色的色调及其对比色是固定的，不受设备颜色方案的影响。
在 EnvironmentShadeView 示例中，您可以看到如何将 @Environment(\.colorScheme) 传递给 level(_:scheme:) 函数，它将自动为您更新颜色。
要有效使用此文件
- 打开包含 ContrastKit 的 Xcode 项目。
- 导航到 PreviewTesting 文件。
- 确保您的环境设置为 Debug 模式以激活 #if DEBUG 条件。
- 打开 SwiftUI 预览窗格以查看结果。
注意
此文件仅供开发使用，不应包含在应用程序的生产版本中。
它提供了一种直接有效的方法，可以直观地检查 ContrastKit 提供的可访问性功能，确保颜色对比度在应用程序部署之前满足所需标准。
PreviewTesting 文件演示了 ContrastKit 与 SwiftUI 的集成，展示了开发者如何在 UI 设计中轻松实现和测试颜色对比度。
通过修改 baseColor 或 ColorLevel，开发者可以尝试不同的组合，以找到满足其特定需求的最佳设置。
- 即时反馈： 允许开发者实时查看颜色级别的变化如何影响可访问性和可读性。
- 可访问性测试： 帮助确保 UI 符合可访问性标准，尤其是在创建包容性应用程序时。
- 易于使用： 简化了测试多种颜色方案的过程，无需部署应用程序或在不同的屏幕之间导航。
对于认真考虑在其应用程序中集成有效对比度处理的开发者来说，PreviewTesting 文件是一个至关重要的工具，使 ContrastKit 成为增强 UI 可访问性的实用选择。
| iOS | iPadOS |
|---|---|
 |
 |
| tvOS | visionOS |
|---|---|
 |
 |
非常鼓励贡献，因为它们有助于使 ContrastKit 对开发者社区更有用。您可以随意 fork 该项目，提交 pull request，或通过 GitHub issues 发送建议。
ContrastKit 在 MIT 许可证下可用，允许在个人和商业项目中广泛使用和修改。有关完整详细信息，请参阅存储库中包含的 LICENSE 文件。