Color Contrast Checker
Check whether a pair of opaque HEX colors meets WCAG contrast thresholds for normal text, large text and interface components. Preview the colors and copy a report for your design review.
Large text means at least 24 CSS px, or about 18.67 CSS px when bold. Gradients, transparent overlays and background images need separate testing. This checks color contrast, not full accessibility compliance. WCAG contrast guidance.
Contrast results
7.578:1
Preview your heading
The quick brown fox jumps over the lazy dog. Check labels, body copy and navigation text.
- AA normal text (4.5:1)
- Pass
- AA large text (3:1)
- Pass
- AAA normal text (7:1)
- Pass
- AAA large text (4.5:1)
- Pass
- UI component contrast (3:1)
- Pass
UI contrast has additional context and exception rules; test components against their actual adjacent colors.
About the Color Contrast Checker
Check whether a pair of opaque HEX colors meets WCAG contrast thresholds for normal text, large text and interface components. Preview the colors and copy a report for your design review.
Processing is local where practical. Online actions are clearly identified.
How to use Color Contrast Checker
Enter the actual colors
Use 3- or 6-digit HEX values from the text and its adjacent background. Resolve transparency separately.
Choose the relevant threshold
Normal text needs 4.5:1 for AA. Large text needs 3:1. Pass/fail is calculated before display rounding.
Review the real interface
Test other states, focus indicators and background variations. A passing pair does not certify the whole page.
Common Use Cases
Check a landing-page heading before publishing.
Use Color Contrast Checker for this workflow without sending the input to an external service.
Review brand colors against readable body text.
Use Color Contrast Checker for this workflow without sending the input to an external service.
Share a contrast result with a designer or developer.
Use Color Contrast Checker for this workflow without sending the input to an external service.
Frequently Asked Questions
Common questions about Color Contrast Checker.
Related Tools You May Like
Related searches: