Colour Contrast Checker

Preview foreground and background combinations live, review pass or fail states for normal and large text, and copy suggested colours that meet WCAG thresholds.

Foreground colour

Background colour

Sample text Aa

Body text preview. The quick brown fox jumps over the lazy dog and shows the real readability of this colour pairing.

Contrast ratio

14.63:1

AA Normal PassAAA Normal PassAA Large PassAAA Large PassUI Component Pass

Colour blindness simulation

Deuteranopia

Sample text

Protanopia

Sample text

Tritanopia

Sample text

Bulk checker

#111827:#FFFFFF17.74:1 AA pass

#777777:#FFFFFF4.48:1 AA fail

About

Check WCAG 2.1 contrast ratios for text and UI colours, preview the pairing live, and get suggested colours that pass AA when the current pair fails.

Accepted input

Accepts foreground and background colours in HEX format, plus optional bulk fg:bg pairs for batch checking.

How to use

Enter or pick the foreground and background colours.
Review the live preview and the main contrast ratio result.
Check the AA, AAA, large-text, and UI component badges to confirm compliance.
Copy one of the suggested replacement colours if the current pair fails.

Tips

Normal text needs 4.5:1 for WCAG AA, while large text only needs 3:1.
The UI component badge is useful for icons, borders, and control outlines, not just text.

Colour Contrast Checker

Colour blindness simulation

Bulk checker

About

Related Tools

About

Related Tools