Colour bits

Contrast Checker

Check if your text and background colours meet standard accessibility ratios.

Check the pair

Enter foreground and background colours. The preview and WCAG contrast checks update instantly in this browser tab.

Text colour

HEX, short HEX, or RGB values work.

Background colour

Try #fff, #ffffff, or rgb(255,255,255).

Text Background

Text target

Contrast

WCAG result

Results update as you type.

Preview

Readable text should feel obvious. Small body copy, labels, and buttons all need enough separation from the background.

Ratio-

Target result-

AA normal-

AA large/UI-

AAA normal-

Enter two colours to calculate their contrast ratio.

WCAG thresholds

AA needs 4.5:1 for normal text and 3:1 for large text or UI graphics. AAA needs 7:1 for normal text.