Skip to content

Account for transparency when calculating WCAG color contrast #54

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Mar 21, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion .swiftpm/xcode/xcshareddata/xcschemes/YCoreUI.xcscheme
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,8 @@
codeCoverageEnabled = "YES">
<Testables>
<TestableReference
skipped = "NO">
skipped = "NO"
testExecutionOrdering = "random">
<BuildableReference
BuildableIdentifier = "primary"
BlueprintIdentifier = "YCoreUITests"
Expand Down
29 changes: 27 additions & 2 deletions Sources/YCoreUI/Extensions/UIKit/UIColor+WCAG.swift
Original file line number Diff line number Diff line change
Expand Up @@ -91,8 +91,33 @@ extension UIColor {
/// - Returns: the contrast ratio between the two colors ranging from 1.0 (identical) to 21.0
/// (the contrast between pure white and pure black)
public func contrastRatio(to otherColor: UIColor) -> CGFloat {
let ourLuminance = self.luminance
let theirLuminance = otherColor.luminance
let ourAlpha = self.rgbaComponents.alpha
let theirAlpha = otherColor.rgbaComponents.alpha
guard ourAlpha == 1.0 || theirAlpha == 1.0 else {
// can't calculate a contrast between two transparent colors
if YCoreUI.isLoggingEnabled {
YCoreUI.colorLogger.warning(
"""
Transparent color \(self) cannot calculate contrast ratio to other transparent color \(otherColor).
"""
)
}
return .nan
}

var color1 = self
var color2 = otherColor

if ourAlpha < 1.0 {
// if color1 is partially transparent, blend it with color2 before evaluating
color1 = color2.blended(by: ourAlpha, with: color1)
} else if theirAlpha < 1.0 {
// if color2 is partially transparent, blend it with color1 before evaluating
color2 = color1.blended(by: theirAlpha, with: color2)
}

let ourLuminance = color1.luminance
let theirLuminance = color2.luminance
let lighterColor = min(ourLuminance, theirLuminance)
let darkerColor = max(ourLuminance, theirLuminance)
return 1 / ((lighterColor + 0.05) / (darkerColor + 0.05))
Expand Down
46 changes: 45 additions & 1 deletion Tests/YCoreUITests/Extensions/UIKit/UIColor+WCAGTests.swift
Original file line number Diff line number Diff line change
Expand Up @@ -53,9 +53,11 @@ final class UIColorWCAGTests: XCTestCase {
XCTAssert(
color1.isSufficientContrast(to: color2, context: $0.context, level: .AA),
String(
format: "#%@ vs #%@ ratio = %.02f under %@ Mode%@",
format: "#%@ %.2f vs #%@ %.2f ratio = %.02f under %@ Mode%@",
color1.rgbDisplayString(prefix: "#"),
color1.rgbaComponents.alpha,
color2.rgbDisplayString(prefix: "#"),
color2.rgbaComponents.alpha,
color1.contrastRatio(to: color2),
traits.userInterfaceStyle == .dark ? "Dark" : "Light",
traits.accessibilityContrast == .high ? " Increased Contrast" : ""
Expand Down Expand Up @@ -135,6 +137,48 @@ final class UIColorWCAGTests: XCTestCase {
XCTAssertEqual(UIColor.black.contrastRatio(to: .white), 21.0)
}

func test_contrastRatio_deliversRatioForOneTransparentColor() {
let color = UIColor(rgb: 0x1B0B99)
let color75 = color.withAlphaComponent(0.75)
let color50 = color.withAlphaComponent(0.50)
let color25 = color.withAlphaComponent(0.25)
let white = UIColor.white
let black = UIColor.black

// contrast against white
contrastRatiosEqual(ratio1: color.contrastRatio(to: white), ratio2: 13.51)
contrastRatiosEqual(ratio1: color75.contrastRatio(to: white), ratio2: 7.12)
contrastRatiosEqual(ratio1: white.contrastRatio(to: color75), ratio2: 7.12)
contrastRatiosEqual(ratio1: color50.contrastRatio(to: white), ratio2: 3.30)
contrastRatiosEqual(ratio1: white.contrastRatio(to: color50), ratio2: 3.30)
contrastRatiosEqual(ratio1: color25.contrastRatio(to: white), ratio2: 1.71)
contrastRatiosEqual(ratio1: white.contrastRatio(to: color25), ratio2: 1.71)

// contrast against black
contrastRatiosEqual(ratio1: color.contrastRatio(to: black), ratio2: 1.55)
contrastRatiosEqual(ratio1: color75.contrastRatio(to: black), ratio2: 1.31)
contrastRatiosEqual(ratio1: black.contrastRatio(to: color75), ratio2: 1.31)
contrastRatiosEqual(ratio1: color50.contrastRatio(to: black), ratio2: 1.15)
contrastRatiosEqual(ratio1: black.contrastRatio(to: color50), ratio2: 1.15)
contrastRatiosEqual(ratio1: color25.contrastRatio(to: black), ratio2: 1.05)
contrastRatiosEqual(ratio1: black.contrastRatio(to: color25), ratio2: 1.05)
}

func test_contrastRatio_deliversNanForTwoTransparentColors() {
let color = UIColor(rgb: 0x1B0B99)
let color75 = color.withAlphaComponent(0.75)
let color50 = color.withAlphaComponent(0.50)

XCTAssertLessThan(color75.rgbaComponents.alpha, 1.0)
XCTAssertLessThan(color50.rgbaComponents.alpha, 1.0)
XCTAssertTrue(color75.contrastRatio(to: color50).isNaN)
YCoreUI.isLoggingEnabled = false
XCTAssertTrue(color50.contrastRatio(to: color75).isNaN)
XCTAssertFalse(color50.isSufficientContrast(to: color75))
XCTAssertFalse(color75.isSufficientContrast(to: color50))
YCoreUI.isLoggingEnabled = true
}

private func contrastRatiosEqual(ratio1: CGFloat, ratio2: CGFloat) {
XCTAssertEqual(round(ratio1 * 100) / 100, round(ratio2 * 100) / 100)
}
Expand Down