Accessibility Color Contrast Checker

The thresholds

WCAG 2 sets a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text at level AA. Level AAA raises those to 7:1 and 4.5:1. Large text means at least 18 point, or 14 point bold, which is roughly 24 and 18.66 pixels. Non-text elements, meaning user interface components and meaningful graphics, need 3:1 against their surroundings, and that rule is the one most often missed entirely.

Ratios are computed from relative luminance

Contrast is not a difference in brightness as the eye judges it, but a ratio derived from the relative luminance of each colour, which weights the red, green and blue channels unevenly because human vision is far more sensitive to green. This is why two colours that look similarly distinct can produce very different ratios, and why intuition is unreliable here.

What people forget to check

Placeholder text, which is frequently rendered at a grey that fails badly. Disabled controls, which WCAG exempts but which still need to be perceivable to be usable. Focus indicators, which need 3:1 against the adjacent background or keyboard users cannot see where they are. Text over images, where the ratio changes across the image. And every state: hover, active and visited links each need checking, not just the default.

Transparency has no fixed ratio

A semi-transparent colour composites with whatever sits behind it, so its effective contrast depends on the backdrop. Test against the actual background rather than the declared colour, and against every background the component appears on.

Dark mode needs separate testing

A palette that passes in light mode frequently fails in dark, because the relationship between the tokens inverts and mid-greys that read well against white read poorly against near-black. Both themes need checking independently; passing one says nothing about the other.

Passing is a floor, not a goal

4.5:1 is the minimum for legibility, not a target for comfortable reading. Body text at 7:1 or better is noticeably easier to read for everyone, not only people with low vision. Contrast is one of the few accessibility improvements that measurably helps every user.

Related tools

• Color Converter — Convert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
• Typography Scale Generator — Generate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.
• Design Token Generator — Generate design tokens as CSS variables, JSON or platform formats, structured in the layers that make them maintainable.
• Responsive Breakpoint Planner — Plan responsive design breakpoints for all devices.