Color Contrast Checker
WCAG contrast ratio checker
Color Contrast Checker: WCAG contrast ratio checker. A free, browser-based tool from DevToolbox that runs entirely on your own device: no upload, no account, no tracking.
About the Color Contrast Checker
Check a foreground and background colour against the WCAG contrast thresholds and see the ratio together with a pass or fail for each level, so an accessibility decision takes a second rather than a spreadsheet.
The calculation is done with the same maths a browser or design tool uses internally, so the values match what you will see when you paste them into CSS, a terminal or an editor.
What you can do with it
- WCAG contrast
- Accessibility contrast
- Contrast ratio calculator
- AA contrast
- AAA contrast
- Color accessibility
How to use it
- Enter your value in the input.
- The equivalent forms are calculated immediately.
- Adjust any options to change the output format.
- Copy the value you want.
Questions
- What contrast ratio do I actually need?
- WCAG 2.2 AA asks for 4.5:1 for normal text, 3:1 for large text (18pt, or 14pt bold) and 3:1 for user-interface components and graphical objects. AAA raises normal text to 7:1.
- Does passing the ratio mean the design is accessible?
- It means one specific requirement is met. Contrast says nothing about focus order, target size, motion or whether colour alone carries meaning. Those are separate success criteria.
- Is my data uploaded anywhere?
- No. The tool is JavaScript that runs in the tab you already have open, and DevToolbox has no backend to send anything to. You can open the network tab and watch: after the page and its script load, nothing is sent while you work.
Related tools
The Color Contrast Checker sits in Utilities, one of the 90 tools on DevToolbox.