WCAG Color Contrast Checker
Check two HEX colors against WCAG 2.1 contrast thresholds. See the ratio, preview text and buttons, and check AA and AAA for normal and large text.
What is WCAG Color Contrast Checker?
Compare a foreground and background color. The checker shows the contrast ratio and evaluates WCAG 2.1 thresholds for normal and large text at AA and AAA, plus the AA threshold for applicable non-text elements.
How to use
- 1
Enter foreground and background HEX colors, use the color pickers, or choose a preset.
- 2
Read the contrast ratio and the result for your text size or non-text element.
- 3
Adjust the colors if needed, or choose Copy report to share the result.
Common Use Cases
- 1
Verify a brand color on a white background meets WCAG 2.1 AA contrast requirements before launch
- 2
Check button text and background color combinations against accessibility guidelines
- 3
Test icon and border colors against their backgrounds for UI component contrast compliance
- 4
Check a specific foreground and background token pair before using it in a design
- 5
Compare a proposed color pair against the relevant contrast threshold before updating a design
Try an Example
Example Input
Foreground: #1d4ed8 / Background: #ffffff
Expected Output
Contrast ratio: 6.70:1 — passes WCAG 2.1 AA for normal text and AAA for large text
Frequently Asked Questions
What counts as large text?
Use the large-text thresholds for text at least 18 pt, or at least 14 pt when bold. Use the normal-text thresholds for smaller text.
Does a passing color pair mean my page meets WCAG?
No. The result covers the contrast of these two colors. Full WCAG conformance depends on the page and other accessibility requirements.