What contrast ratio measures
Contrast ratio expresses the difference in relative luminance between two colours, on a scale from 1:1 for identical colours to 21:1 for pure black on pure white. It is the standard measure of whether text is readable against its background.
The calculation is not a simple comparison of colour values. It weights the red, green and blue components according to how sensitive human vision is to each, which is why green contributes far more to perceived brightness than blue does. Two colours that look similarly dark can produce very different ratios.
The WCAG thresholds
The Web Content Accessibility Guidelines define two conformance levels. Level AA, which is what most legislation and procurement requirements reference, needs 4.5:1 for normal text and 3:1 for large text. Level AAA is stricter, requiring 7:1 and 4.5:1 respectively.
Large text is defined as at least 18.66 pixels bold, or 24 pixels regular. The allowance exists because larger letterforms have thicker strokes and remain legible at lower contrast.
A separate 3:1 requirement applies to user interface components and meaningful graphics — button borders, form field outlines, icons that convey information. This is frequently overlooked, and a faint grey input border on a white background is one of the most common accessibility failures on the web.
Why this matters practically
Around one in twelve men has some form of colour vision deficiency, and a far larger proportion of the population has reduced contrast sensitivity through age, cataracts or other conditions. Beyond that, everyone reads at lower effective contrast in bright sunlight on a phone screen.
Accessibility requirements are also increasingly legal rather than optional. Public sector bodies in many jurisdictions must meet AA, and private sector litigation over inaccessible websites has grown substantially.
Common failures
Light grey placeholder text in form fields is the most frequent, and it is particularly damaging because placeholders often carry the only label. Light grey on white for secondary text, white text on mid-tone brand colours, and low-contrast disabled states are the others that appear repeatedly.
Brand colours are the usual source of tension, since a colour chosen for a logo often fails badly as text. The practical resolution is to keep the brand colour for large display use and darken it for body text.
What contrast does not cover
Passing the ratio does not make a design accessible on its own. Never rely on colour alone to convey meaning — a red field indicating an error should also carry text or an icon, since a user who cannot distinguish red from green gets no information from the colour.
Calculated in your browser
Everything runs locally using the official WCAG luminance formula.
Frequently Asked Questions
What contrast ratio do I need?
4.5:1 for normal text and 3:1 for large text to meet WCAG AA, which is the level most legislation references. AAA requires 7:1 and 4.5:1.
What counts as large text?
At least 18.66 pixels bold or 24 pixels regular. Larger letterforms remain legible at lower contrast.
Do buttons and icons need to pass?
Yes. Interface components and meaningful graphics require 3:1. Faint input borders are a very common failure.
Is passing the ratio enough for accessibility?
No. You must also avoid conveying meaning through colour alone, since users with colour vision deficiency get no information from it.
What if my brand colour fails?
Keep it for large display text and logos, and use a darkened variant for body copy. This is the standard resolution.