Check text and interface color pairs against WCAG contrast requirements.
Enter a valid HEX color.
Enter a valid HEX color.
Good color includes everyone.
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.
How to check color contrast
- Enter your design’s foreground and background colors in Color Contrast Checker. Adjust foreground opacity if the text or icon is partly transparent; the checker evaluates the resulting color over the opaque background.
- Set the preview’s text size and weight. WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 for normal text and 4.5:1 for large text. Large text means at least 24px regular or about 18.67px bold.
- Check essential interface components and graphical objects against the applicable 3:1 non-text contrast requirement. Decorative colors do not all need to meet the same threshold as text or meaningful controls.
- Choose an improvement target and find a passing foreground if the pair fails. Share the check or download a report of the selected colors and results.
- Open Compare a palette to test pairs from two to ten colors. Choose a suitable pair for the preview or download the comparison as CSV. Check the pairs you actually plan to use, rather than assuming the whole palette passes.
#777777 on white has a contrast ratio of about 4.48:1, just below AA for normal text. Darkening the text to #767676 raises it above 4.5:1. Results use the unrounded value. Passing color contrast is one part of accessibility; it does not check labels, keyboard operation, or every other requirement.