✦ SOLVORY FREE ONLINE TOOLS · ACCESSIBILITY & DESIGN
WCAG Color Contrast Checker — Make Colors Readable.
Measure text contrast ratios and WCAG 2.2 AA and AAA thresholds for foreground and background HEX combinations.
This interactive WCAG Color Contrast Checker workspace requires JavaScript. How-to instructions, methodology and FAQs are available below.
How to use WCAG Color Contrast Checker
Measure text contrast ratios and WCAG 2.2 AA and AAA thresholds for foreground and background HEX combinations.
- Choose a foreground and background color, or paste HEX pairs in Bulk mode.
- Read the WCAG contrast ratio and AA/AAA results for normal and large text.
- Use suggested alternate foreground colors if the input fails; test in real UI context.
Worked example
Enter #46308A for text and #FFFFFF for background to calculate a contrast ratio and see pass/fail thresholds.
How the tool works and its limitations
WCAG relative luminance linearizes sRGB channels and combines them using standard coefficients. Contrast is (lighter luminance+0.05)/(darker luminance+0.05). Normal text requires ≥4.5:1 for AA and ≥7:1 for AAA; large text requires ≥3:1 AA and ≥4.5:1 AAA. Non-text contrast is evaluated separately under relevant SC 1.4.11 requirements.
Frequently asked questions
What ratio passes AA normal text?
At least 4.5:1.
Is AAA mandatory everywhere?
Not universally. WCAG A/AA/AAA are different conformance levels; applicability depends on the project.
Does passing mean my website is accessible?
No. Contrast is only one part of accessibility, alongside structure, focus, interaction and readable content.
Privacy, compatibility and safety
Computations run locally using browser JavaScript. The tool does not intentionally send input data or uploaded file contents to Solvory’s servers. Modern browser APIs, JavaScript support and available device memory affect compatibility and batch size. Inspect the output before using it for critical professional work.