Check a colour contrast ratio
Enter a text colour and a background colour to get the WCAG contrast ratio and see which of the four thresholds it passes. Runs in your browser.
What it checks
- The contrast ratio, computed from WCAG 2.2 relative luminance.
- AA for body text, which needs 4.5:1.
- AA for large text, which needs 3:1 from 24 px, or from 18.66 px when bold.
- AAA for body text, which needs 7:1.
- AA for controls, icons and focus rings, which needs 3:1.
What is not stored
Nothing is stored and nothing is sent. This checker is JavaScript that runs inside your browser tab, so the value you paste never reaches h2check.org or any other server. Close the tab and it is gone.
Limits
- The ratio comes from two flat colours. Text over an image, a gradient or a translucent layer needs the composited colour, which this tool cannot read.
- Passing the ratio is not the same as being readable. A thin weight at 4.5:1 still fails in practice.
- Hex and rgb() are read. Named colours, hsl() and colours with alpha are not.
Procedures that explain the result
- How to check a website for color blindness
- How to check color contrast ratio
- How to check visible focus indicator
Put it on your own page
Link to it with the value filled in, and the checker runs as soon as the page opens.
<a href="https://h2check.org/tools/color-contrast/">Check a colour contrast ratio</a>