Check text and interface colors against WCAG contrast requirements.
All color tools
Enter a valid HEX color.
Enter a valid HEX color.
8.60:1Passes AA for this large text
Good color includes everyone.
âś“Essential icons and boundaries
AA normal textPass 4.5:1
AA large textPass 3:1
AAA normal textPass 7:1
AAA large textPass 4.5:1
UI components & iconsPass 3:1
Compare a palette Find colors that work together
No pairs meet this target. Try a lower target or add lighter and darker colors.
WCAG 2.2 requires 4.5:1 for normal AA text, 3:1 for large AA text and essential non-text graphics, and 7:1 for normal AAA text. Large means 24px regular or 18.67px bold. Results use the unrounded ratio and your foreground opacity over an opaque background.
Check text and interface contrast
- Enter the foreground and background colors used in your design. Adjust foreground opacity when the text or icon is partly transparent.
- Set the preview’s size and weight to see the relevant AA text result. The checker also reports AAA and essential interface-component thresholds.
- Choose a target and find a passing foreground, then share the check or download a report.
- Open Compare a palette to check pairs from two to ten colors. Choose a passing pair to use it in the preview, or download the pair results as CSV.
Black on white has a 21:1 contrast ratio. #777777 on white is about 4.48:1, so it falls just below AA for normal text. Pass/fail uses the full value rather than the displayed rounding.