Skip to content

Account for transparency when calculating WCAG color contrast #42

Closed
@mpospese

Description

@mpospese

Intro

When we perform our color contrast checking, we only look at the RGB channels and not the A. When the foreground color has alpha, it becomes blended with the background color, and it is this blended color that we should perform the check against. (If the background color has alpha, then it becomes blended with whatever is behind it, which is unknown to our package).

Tasks

  • If neither color have alpha values < 1.0 then no change
  • If both colors have alpha values < 1.0 we should return .nan for the contrast ratio and fail any comparisons.
  • If one color has an alpha value, we will treat it as the foreground color (although it may not be) and blend it with the other color, and then compare contrast with the second color.

Example

UIColor.secondaryLabel when compared to UIColor.systemBackground seems to meet AA contrast requirements across all color spaces (light/dark modes, normal/high contrast) but that's only because we're ignoring .secondaryLabel's alpha channel. It is in fact transparent and the composite of it with .systemBackground does not meet AA contrast requirements for normal text.

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions