OpusDesk Hub What this tool does
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.
How to use Color Contrast Checker
- 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.
- 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
Worked example
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 |
Supported inputs and limits
- foreground and background color values accepted by the UI
- 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.
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.
Is information sent to a server?
Tool inputs are processed in this browser. This product does not use analytics or send your input to an external API. Clicking an external website link still visits that website.