[Issue 42] Calculate contrast ratios for transparent colors

Author: Mark Pospesel

Sources/YCoreUI/Extensions/UIKit/UIColor+WCAG.swift

@@ -91,8 +91,31 @@ 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))

Tests/YCoreUITests/Extensions/UIKit/UIColor+WCAGTests.swift

@@ -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" : ""
@@ -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)
     }