Color Contrast Checker
Enter a text color and a background color and see the contrast ratio at once, with a pass or fail for each WCAG level: normal and large text at AA and AAA, and interface parts and graphics. A live preview shows how the pair looks, and when it falls short the tool offers the nearest colors that pass. Everything runs in your browser.
- PassNormal text, AAneeds 4.5 : 1, WCAG 1.4.3
- PassLarge text, AAneeds 3 : 1, WCAG 1.4.3
- PassNormal text, AAAneeds 7 : 1, WCAG 1.4.6
- PassLarge text, AAAneeds 4.5 : 1, WCAG 1.4.6
- PassInterface parts and graphics, AAneeds 3 : 1, WCAG 1.4.11
Normal text, 16 pixels. The quick brown fox jumps over the lazy dog.
Large text, 24 pixels bold
Button outlineThe ratio follows the WCAG 2.2 formula: (L1 + 0.05) / (L2 + 0.05), where L is the relative luminance of the lighter and the darker color. WCAG does not round: 4.499 does not meet 4.5, so the ratio is cut off after two decimals and never shown as passing when it is not. Large text is at least 18 point, or 14 point bold, about 24 or 18.5 pixels. Colors with transparency cannot be checked on their own, because the result depends on what is behind them. A passing ratio is necessary but not the whole of accessibility, so also check text size, spacing and color blindness. The tool runs in your browser and nothing you enter is uploaded.
Related Tools
[5 suggestions]Color Converter and Contrast Checker
Convert a color between HEX, RGB and HSL, look up CSS color names, and check the WCAG contrast ratio of text on a background.
Developer & WebCSS Gradient Generator
Design linear, radial and conic CSS gradients with any number of colour stops, preview them live and copy the CSS.
Developer & WebQuote Image Generator
Turn a quote into a shareable picture with a gradient background, text sized to fit, and square, portrait, story or wide shapes.
Writing & ContentCode to Image Generator
Turn a code snippet into a shareable image with syntax colors, a window bar, line numbers and a gradient backdrop, as a PNG, JPEG, WebP or SVG.
Developer & WebPX to REM Converter
Convert px to rem, em, pt, pc, vw and percent for CSS, with your own root font size, parent size and viewport width.
Developer & WebAbout the Color Contrast Checker
The contrast ratio compares how bright two colors are. Each color is turned into a relative luminance, from 0 for black to 1 for white, using the formula in the Web Content Accessibility Guidelines (WCAG) 2.2, and the ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color. It runs from 1 to 21. WCAG sets five levels. Normal text needs 4.5 to 1 at level AA (criterion 1.4.3) and 7 to 1 at level AAA (1.4.6). Large text, which is at least 18 point or 14 point bold, about 24 or 18.5 pixels, needs 3 to 1 at AA and 4.5 to 1 at AAA. Interface parts such as input borders and icons, and the parts of graphics you need to understand, need 3 to 1 against their neighbors (1.4.11). WCAG does not round, so 4.499 does not meet 4.5, and this tool cuts the ratio off after two decimals instead of rounding it up, so a pair that just fails never shows as passing. Colors can be written as #rrggbb, #rgb, rgb(), hsl() or a basic name such as navy. Colors with transparency cannot be checked alone, because the result depends on what is behind them. When a pair fails, the tool moves the lightness of the text color, or of the background, in small steps while keeping the hue, and shows the first color that reaches 4.5 to 1. A passing ratio is one part of accessible color: text size, spacing, and color blindness matter as well. Nothing you enter is uploaded.
What is a good contrast ratio for text?▾
WCAG level AA asks for at least 4.5 to 1 for normal text and 3 to 1 for large text. Level AAA asks for 7 to 1 and 4.5 to 1. Black on white is the maximum, 21 to 1, and a mid gray such as #777777 on white is only about 4.47 to 1, which just misses AA for normal text.
How is the contrast ratio calculated?▾
Each color is converted to a relative luminance, using 0.2126 for red, 0.7152 for green and 0.0722 for blue after undoing the sRGB curve. The ratio is the luminance of the lighter color plus 0.05, divided by the luminance of the darker color plus 0.05.
What counts as large text?▾
WCAG defines large text as at least 18 point, or 14 point if bold. Since 1 point is 1.333 pixels, that is about 24 pixels regular or 18.5 pixels bold. Large text needs a lower ratio, 3 to 1 at AA, because it is easier to read.
Why does a ratio of 4.499 fail if it shows as 4.5?▾
WCAG does not allow rounding, so 4.499 is below 4.5. Many tools round to two decimals and can show a failing pair as 4.50. This one cuts the ratio off after two decimals, so it never shows a pass that is really a fail.
Can I check a color that is partly transparent?▾
Not on its own. The contrast of a see-through color depends on the color behind it. Work out the solid color you see on screen, for example by sampling it with a picker, and enter that color.