Color contrast checker

Brand colours often fail accessibility checks as text: the orange that looks right on a button is unreadable as a link. Enter two colours to see the WCAG ratio and every level it passes, and when it fails, get the closest shade of the same colour that passes.

Preview

Large heading text

Body copy at 16px is held to the stricter AA threshold of 4.5:1. Most of a page is text at this size, so it is the result that matters most.

Small print at 13px is the first to become unreadable.

Outlined buttonFilled button

AA · Normal text
Fail
Needs 4.5:1. Body text under 24px, or under 18.66px bold.
AA · Large text
Pass
Needs 3:1. Text from 24px, or 18.66px bold.
AAA · Normal text
Fail
Needs 7:1. The enhanced level for body text.
AAA · Large text
Fail
Needs 4.5:1. The enhanced level for large text.
AA · UI and graphics
Pass
Needs 3:1. Icons, input borders, focus rings and chart marks.

Contrast ratio

3.20:1

Passes for large text and interface elements only.

Text colour

Background colour

Suggested text colours

Same hue and saturation, lightness adjusted only as far as needed.

#cd4d10
Nearest for AA (4.5:1) · 4.50:1
#a92800
Nearest for AAA (7:1) · 7.02:1

How the suggestion works

The suggested colour keeps your text colour’s hue and chroma in OKLCH, a perceptual colour space, and changes only its lightness — by the smallest amount that reaches the target ratio. The result reads as the same brand colour, darker or lighter.

Ratios are computed with the WCAG 2.2 relative luminance formula and rounded down for display, so a pair shown as 4.50:1 genuinely passes AA.

Questions

What contrast ratio is required for WCAG AA?

4.5:1 for normal text and 3:1 for large text — 24px and above, or 18.66px bold. User interface components such as input borders and icons need 3:1 against adjacent colours.

What is the difference between AA and AAA?

AA is the level most laws and procurement standards require, including the European Accessibility Act and Section 508. AAA is stricter: 7:1 for normal text and 4.5:1 for large text.

Does grey text on white pass?

Down to #767676, which is 4.54:1 on white. One step lighter, #777777, is 4.48:1 and fails AA for body text.

Is contrast checked differently in dark mode?

The same formula applies to any pair, but colours that pass on white often fail on near-black backgrounds. Check each theme's pairs separately.

Why is my brand colour failing?

Mid-lightness colours — many oranges, yellows, greens and light blues — sit below 4.5:1 against both white and black. Use the suggested darker shade for text and keep the original for large shapes and buttons.

More free tools

View all

Prêt à dominer la recherche IA ?

Commencer maintenant

Allswap