Understanding color contrast

Contrast ratio estimates how distinguishable a foreground color is from its background. It is a core readability check, but it is not the whole accessibility experience.

How the ratio is expressed

Contrast is written as a ratio from 1:1 to 21:1. Identical colors have a ratio of 1:1. Black against white reaches 21:1. The calculation uses relative luminance rather than a simple average of red, green, and blue.

Common WCAG thresholds

For ordinary text, a ratio of at least 4.5:1 is commonly used for Level AA, while 7:1 is used for Level AAA. Large text has lower thresholds because thicker and larger letterforms are easier to distinguish. Interface components and meaningful graphical objects are evaluated differently from body text.

Why black or white is not always enough

HexCheck compares the selected color with pure black and pure white because those are common design choices. A brand system may need a warmer near-black, an off-white, or a different accessible companion color. Small changes can preserve the visual character while raising contrast above a required threshold.

Test complete states

Check normal text, links, hover states, disabled controls, focus indicators, charts, icons, form errors, and text placed over images or gradients. A component that passes in one state can fail in another.

Do not communicate only with color

Passing contrast does not make color-only communication accessible. Errors should include text or icons, selected states should use more than a hue change, and charts should provide labels or patterns when color distinctions carry meaning.