Digital Hub Lab
Colour Contrast Checker
Check two colours against common WCAG contrast thresholds for normal and large text.
Compare foreground and background colours against common WCAG contrast thresholds. The checker shows the calculated ratio, a live example and plain-language results for normal and large text.
WCAG contrast check
Compare two colours
Choose a foreground and background colour to see their contrast ratio and common WCAG results.
Enter a valid three- or six-digit hexadecimal colour, such as #123 or #123456.
Strong contrast for text at all common WCAG levels.
Large text means at least 24px regular, or about 18.7px when bold. Interface components and meaningful graphics generally need 3:1 against adjacent colours.
Private by design: this tool runs in your browser. What you enter is not sent to or stored by Digital Hub Zone.
How to check a colour combination
- Choose or enter the foreground colour used for text or an interface element.
- Add the background colour directly behind it.
- Review the ratio and the relevant AA or AAA result.
- If a combination needs work, make the lighter colour lighter or the darker colour darker and test again.
Understanding the results
WCAG AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. The enhanced AAA thresholds are 7:1 and 4.5:1 respectively. Large text is generally at least 24 pixels when regular, or about 18.7 pixels when bold.
Contrast is one part of accessible colour
Do not use colour as the only way to communicate meaning. Links, errors and status messages should also have text, icons, underlines or another visible cue that does not depend on colour perception alone.