Enter Foreground and Background Colors
Add text and background colors as hex values in the WCAG color contrast checker. The preview shows how the combination appears in real use.
Color Contrast Checker
Use this WCAG color contrast checker to test foreground and background color combinations for readability. Enter hex colors, view the contrast ratio, and check WCAG AA and AAA pass status for normal text, large text, and interface design.
Workspace
Use the tool below. Your inputs stay local when the tool supports browser-only processing.
The quick brown fox jumps over the lazy dog.
Small text sample for visual comparison.
Contrast Ratio
17.93:1
All WCAG checks passed
WCAG 2.1 Compliance
AA Normal Text(≥ 4.5:1)
PASSAA Large Text(≥ 3:1)
PASSAAA Normal Text(≥ 7:1)
PASSAAA Large Text(≥ 4.5:1)
PASSUI Components(≥ 3:1)
PASSLast reviewed: · Testing methodology
Workflow
How to use the Color Contrast Checker
Review AA and AAA Results
The WCAG color contrast checker calculates the contrast ratio and marks whether it passes normal text, large text, and interface contrast recommendations.
Adjust Until Accessible
Change either color until the ratio passes your target level. Use the WCAG color contrast checker while designing buttons, text, links, and UI states.
How this tool works
The component linearizes sRGB channels, calculates relative luminance for each color, and divides the lighter and darker values according to the WCAG contrast formula.
- Engine: WCAG relative luminance and contrast-ratio formulas
- Supported input: foreground and background color values accepted by the UI
- Output: contrast ratio, AA/AAA pass indicators
- Input
- #000000 text on #FFFFFF background
- Output
- 21:1 contrast; passes AA and AAA for normal text
Limits, edge cases, and troubleshooting
Use actual foreground and composited background colors. Check every interactive state, not just the default state.
- The result describes the entered color pair only.
- It does not measure font rendering, background images, transparency stacks, focus visibility, or the overall accessibility of a page.
When to use another workflow
Use browser accessibility tooling and manual testing for gradients, opacity, images, forced-colors mode, and complete interface audits.
| Option | Best for | Trade-off |
|---|---|---|
| This browser tool | Quick, private, one-off work | Limited by browser memory and the documented feature set |
| Desktop or command-line tool | Batch jobs and repeatable automation | Requires installation and setup |
Verification
Reviewed by the Free Online Tools Nest Team on 2026-08-26. The interface, output path, and documented limitations were checked against the current implementation. See our testing methodology for the review process.
Read the testing methodologyColor Contrast Checker — Frequently Asked Questions
What does a WCAG color contrast checker measure?
A WCAG color contrast checker measures the luminance contrast between foreground and background colors. The result helps determine whether text is readable for users with low vision.
Should I target AA or AAA contrast?
WCAG AA is the common accessibility target for most websites, while AAA is stricter. This checker shows both so you can choose the level that fits your design and compliance goals.