WCAG Contrast Checker
Check the color contrast ratio between text and background colors against WCAG AA and AAA accessibility standards — instantly inside your browser.
What is a contrast ratio?
The Web Content Accessibility Guidelines (WCAG) define a contrast ratio between 1:1 (identical colors) and 21:1 (pure black on pure white) to describe how easy text is to read against its background. Low contrast makes text hard to read, especially for users with low vision — WCAG sets minimum ratios that pass at different conformance levels.
This tool computes the exact contrast ratio between any two hex colors and checks it against the WCAG AA and AAA thresholds for both normal and large text.
GuideHow to use it
How the ratio is calculated
Each color's relative luminance is calculated from its red, green, and blue channels using the WCAG formula, which weights each channel differently to match human perception of brightness. The contrast ratio is then the luminance of the lighter color plus 0.05, divided by the luminance of the darker color plus 0.05 — exactly as specified in the WCAG 2.x success criteria.
Why it helpsFeatures & benefits
Why this runs entirely in your browser
The luminance and contrast math runs in JavaScript locally in the tab, which means it keeps working offline once the page has loaded and nothing entered here is ever sent to a server.
Common uses
Checking a website's text and background color pairing before shipping a design, verifying a button meets accessibility requirements, or auditing an existing site for WCAG compliance.
Frequently asked questions
A few things people usually want to know before trusting the numbers.
AA is the standard minimum level most sites aim for (4.5:1 for normal text, 3:1 for large text). AAA is a stricter, enhanced level (7:1 for normal text, 4.5:1 for large text) recommended for higher accessibility needs.
Text that's at least 18pt (24px), or 14pt (about 19px) bold, is considered large text and gets a lower required contrast ratio.
No. Contrast ratio is symmetric — swapping the text and background colors gives the same ratio either way.
21:1, which occurs only between pure black (#000000) and pure white (#ffffff).
No. All calculation happens locally in your browser. Nothing entered here is sent to a server, stored, or shared.