Color Contrast Checker
Check WCAG AA/AAA contrast ratio between two colors
About this calculator
The Color Contrast Checker computes the WCAG 2.x contrast ratio between a foreground and background color using the relative-luminance formula (L1 + 0.05) / (L2 + 0.05). It accepts #rgb, #rrggbb, and rgb(r,g,b) input, and reports the exact ratio, both colors' luminance, and pass/fail flags for AA and AAA at normal (4.5:1 / 7:1) and large text (3:1 / 4.5:1) thresholds. Invalid colors return an error. Essential for accessible web design.
How to use the Color Contrast Checker tool
- Enter or paste your input into the field.
- Read the output — it updates instantly as you type.
- Adjust the options, if any, to fit your use case.
- Copy the page URL to share the exact result.
Common examples
- #000000 on #ffffff → 21.0000:1 — passes every AA and AAA level
- #777777 on #ffffff → 4.4781:1 — fails AA normal text by a hair, passes AA large
- #0066cc on #ffffff → 5.5666:1 — AA pass, AAA normal fail
- #ffcc00 on #333333 → 8.3564:1 — passes AAA for all text sizes
Frequently asked questions
How does the Color Contrast Checker tool work?
Enter or paste your input and the tool processes it directly in your browser, showing the result immediately. Nothing you type is uploaded to a server — the entire computation happens on your device.
When would I use the Color Contrast Checker tool?
It is handy for development, debugging, design and administration tasks — whenever you need this transformation or check done quickly without installing anything or trusting a third-party service with your data.
How reliable are the results?
The tool implements the relevant standard or specification directly, so its output matches what compliant software produces. Edge cases such as empty or malformed input are reported clearly instead of failing silently.
Can I share a specific result with someone else?
Yes. Your input updates the URL, so copying the address bar and sharing the link reopens the tool in the same state for whoever clicks it.