All topics
Topic hub

Color accessibility & vision

Naming a color, understanding color vision, and checking contrast for accessible design

Three related but distinct needs live under "color accessibility": knowing what a color actually is (naming or identifying it), understanding your own color vision, and making sure the colors you use in a design are readable by people whose vision differs from your own.

Color vision deficiency — commonly called color blindness — is more common than most people assume, and it's overwhelmingly a male-skewed trait because the most common forms are carried on the X chromosome. Red-green deficiency, the most widespread type, affects roughly 1 in 12 men of Northern European descent but a much smaller share of women. It comes in two main forms: deuteranopia (reduced or absent green-cone sensitivity, the more common of the two) and protanopia (reduced or absent red-cone sensitivity). Blue-yellow deficiency, tritanopia, is far rarer and isn't sex-linked the same way.

For designers and developers, the practical side of color accessibility is contrast: making sure text is actually readable against its background. WCAG (Web Content Accessibility Guidelines) 2.x defines specific ratio thresholds — 4.5:1 for normal text and 3:1 for large text (roughly 24px or 19px bold) to meet the widely-required AA level, rising to 7:1 and 4.5:1 respectively for the stricter AAA level. APCA (Accessible Perceptual Contrast Algorithm) is a newer model built to match human contrast perception more accurately than the older ratio formula — it's the algorithm planned for the eventual WCAG 3, but isn't yet an official required standard the way the WCAG 2 ratio is today.

Hueper, Huemetric, and Contrasta each cover one of these three needs directly. Hueper is for identifying a color you're looking at — a live camera scan with a precision loupe for exact-pixel sampling, matched against a built-in offline library to give you the nearest color name. Huemetric is an actual color vision screening test, using freshly generated plates each time (so there's nothing to memorize) for a quick check, with a longer clinical-style 24-plate protocol available for a more thorough screening. Contrasta checks whether a specific color combination is actually accessible — scoring both WCAG AA/AAA and the newer APCA metric, with an eyedropper to sample colors straight from a photo or design.

The app

How it compares to other tools

Frequently asked questions

How common is color blindness?

Red-green color vision deficiency, the most common inherited form, affects roughly 1 in 12 men and about 1 in 200 women of Northern European descent. It's far more common in men because the genes involved are carried on the X chromosome — men have only one X chromosome, so a single affected copy is enough to cause it, while women need two affected copies.

What's the difference between deuteranopia, protanopia, and tritanopia?

Deuteranopia and protanopia are both forms of red-green color blindness — deuteranopia involves reduced or absent sensitivity in the green-detecting cones and is the more common of the two, while protanopia involves the red-detecting cones. Tritanopia is a much rarer blue-yellow deficiency and, unlike the red-green forms, isn't linked to the X chromosome.

What contrast ratio do I need to meet WCAG accessibility guidelines?

For the widely-required AA level: 4.5:1 for normal text, and 3:1 for large text (roughly 24px, or 19px if bold). The stricter AAA level raises those thresholds to 7:1 and 4.5:1 respectively. These are the official published WCAG 2.x ratio requirements.

What is APCA and how is it different from the standard WCAG contrast ratio?

APCA (Accessible Perceptual Contrast Algorithm) is a newer contrast model designed to match how humans actually perceive contrast more closely than the older WCAG 2 ratio formula, accounting for factors like text size, weight, and whether it's light-on-dark or dark-on-light. It's the algorithm planned for the upcoming WCAG 3 standard, but it isn't yet an official required threshold the way the WCAG 2 ratio is today — most current compliance requirements still reference the WCAG 2 numbers.

Can a phone-based color blindness test replace a clinical eye exam?

Not fully. Screen calibration, brightness, and ambient lighting all affect how test plates render, so a phone-based screening is a useful quick indicator but not a medical diagnosis. A comprehensive clinical exam uses controlled viewing conditions and is the right step if a screening test suggests a deficiency and you want a definitive answer.