Colour Contrast Checker

WCAG 2.1 sets two thresholds. AA needs a ratio of at least 4.5:1 for normal body text and 3:1 for large text (18pt and above, or 14pt bold). AAA is stricter at 7:1 for body and 4.5:1 for large text. Anything below 3:1 fails for everyone. The number itself is a maths comparison of relative luminance, not a perception score, so two colours that look similar to you can still pass while two that look different can fail.

Most production sites aim for AA on body text and AAA on critical UI like form errors and pricing. The reason is pragmatic: hitting AAA on every paragraph forces a near-monochrome palette and most clients reject it. A safe default is body copy at 7:1 or higher, secondary text at 4.5:1, and disabled or placeholder text accepted at 3:1 with a clear non-text indicator. Run anything you publish through a checker like this one before launch, not after.

The WCAG large text rule is widely misunderstood. It only applies to text that is 18pt (24px) and above, OR 14pt (about 18.66px) and above when bolded. A 16px headline that looks big on screen is still 'normal text' for the purposes of contrast and needs 4.5:1. The threshold drops to 3:1 because larger and heavier strokes are easier to read against a low-contrast background, not because designers feel like it.

If you have a hero headline at 64px in light grey on white, you are probably fine at 3:1. If you have body copy at 16px in the same grey, it fails. The fix is rarely to enlarge the body copy; it is to darken the text or lighten the background a few shades. Use the auto-fix suggestions in this tool to see the smallest possible change that takes you from failing to passing. For graphics and icons, the rule is again 3:1 against the adjacent colour.

Brand palettes get designed for posters and packaging where contrast is huge. They get reused on websites where 16px text on a 'brand light blue' button suddenly fails. A common offender: white text on the brand-blue button at #2563eb hits about 4.6:1, just passing AA, but the same button in a 'lighter, friendlier' shade at #60a5fa drops to 2.4:1 and fails completely. You did not change the brand. You ruined accessibility.

You almost never need to change the hue. You need to change the lightness. Take the brand colour into HSL, hold the hue and saturation, and slide the lightness up or down until you pass. The auto-fix in this tool does exactly that. If you must keep the exact failing brand colour for a button, pair it with a darker text colour (deep navy on light blue often works), or add an underline so you are not relying on contrast alone. Want the underlying numbers? See the [hex to RGB converter](/hex-to-rgb) and [colour palette generator](/colour-palette-generator).

Contrast applies to more than paragraph text. WCAG 2.1 added a 3:1 minimum for non-text content used to identify UI components and their states. A focus ring of 1px in a colour that barely shows against the background fails the same way ghost-grey text does. Form input borders against a white card need 3:1. Selected vs unselected toggles need 3:1 between them. Most design systems we audit fail on focus rings before they fail on body copy.

The mistake is showing only one state to the contrast checker. Audit your hover state, your focus state, your selected state, your error state and your disabled state separately. Disabled buttons are exempt from contrast requirements (WCAG calls them 'inactive'), but if you greyed out a button without making it look disabled, sighted users still need to know they can't click it. A 3:1 focus ring against the page background is the single most reliable accessibility win you can ship in an afternoon.