orbitHow to check color contrast
- Choose the text colour and the background colour.
- Look at the sample text to see how the combination looks.
- Read the contrast ratio and the pass or fail result for each WCAG level, then copy the result if you need it for documentation.
What the WCAG levels mean
The Web Content Accessibility Guidelines (WCAG) define minimum contrast so that text can be read by people with low vision or colour vision deficiencies, and by everyone on a bright phone screen outdoors.
- AA, normal text: 4.5 : 1 — the level required by most accessibility laws and policies.
- AA, large text: 3 : 1 — for text at least 24 px (18 pt), or 18.66 px (14 pt) when bold.
- AAA, normal text: 7 : 1 — enhanced contrast, recommended for long reading.
- AAA, large text: 4.5 : 1.
Icons, form borders and other important graphics should have at least 3 : 1 against their surroundings.
How the ratio is calculated
Each colour is converted to its relative luminance, a measure of perceived brightness defined in WCAG 2. The ratio is (lighter + 0.05) ÷ (darker + 0.05) and ranges from 1 : 1 (identical colours) to 21 : 1 (black on white).
Tips for better contrast
- Light grey text on white is the most common failure. Darken the grey until it passes 4.5 : 1.
- Do not rely on colour alone to convey meaning; add an icon or a label.
- Text placed over photos needs a solid or semi-transparent background behind it.
Frequently asked questions
Does passing AA make my website accessible?
Contrast is one important requirement among many. Keyboard navigation, alternative text for images and clear structure matter too.
Where do I get the colour codes?
Use the eyedropper in the colour fields or in the Color picker, or copy the HEX values from your design file or CSS.