Color Contrast Checker (WCAG)
This color contrast checker measures the WCAG 2.x contrast ratio between a foreg
This color contrast checker measures the WCAG 2.x contrast ratio between a foreg
How to use Color Contrast Checker (WCAG)
- Enter or pick your foreground (text) and background colors.
- Read the contrast ratio and the AA/AAA pass or fail marks for text and UI.
- Adjust the colors or use Swap until the pairs you need pass, then copy the report.
About Color Contrast Checker (WCAG)
This color contrast checker measures the WCAG 2.x contrast ratio between a foreground (text) color and a background color, then tells you whether that pair passes the AA and AAA thresholds for normal text, large text, and non-text UI elements. Enter colors as hex (#1A1A1A or #abc), rgb()/rgba() notation, or a common name like black, and adjust them with the native color pickers to find a combination that passes.
The ratio is computed with the official formula: each color is linearized from sRGB to relative luminance, and the ratio is (lighter + 0.05) / (darker + 0.05). A translucent foreground (hex with alpha, or rgba) is composited over the background before scoring, since that is what a reader actually sees; the background itself is treated as opaque. The pass marks use WCAG thresholds of 4.5:1 (AA) and 7:1 (AAA) for normal text, 3:1 (AA) and 4.5:1 (AAA) for large text, and 3:1 for UI components and graphics.
Everything runs entirely in your browser with plain JavaScript. Nothing is uploaded and there is no sign-up. Note that WCAG contrast is a mathematical check of two colors and does not judge readability from font weight, anti-aliasing, or surrounding imagery, so use it as a reliable baseline rather than the final word.
Frequently asked questions
- What contrast ratio do I need to pass WCAG?
- For normal text you need at least 4.5:1 for AA and 7:1 for AAA. Large text (18.66px bold or 24px regular and up) needs 3:1 for AA and 4.5:1 for AAA. Icons, borders, focus rings, and other non-text UI need at least 3:1 under WCAG 1.4.11.
- What counts as large text?
- WCAG defines large text as at least 24px (roughly 18pt) for regular weight, or at least 18.66px (roughly 14pt) when bold. Large text has lower contrast requirements because bigger glyphs are easier to read.
- How is the contrast ratio calculated?
- Each color's channels are converted from sRGB to linear light, combined into a relative luminance, and the ratio is taken as (lighter luminance + 0.05) divided by (darker luminance + 0.05). This is the exact formula in the WCAG 2.x specification.
- Can I check semi-transparent colors?
- Yes. If the foreground uses an alpha value (an 8-digit hex or rgba), it is blended over the background before the ratio is measured, matching what a viewer actually sees. The background is treated as fully opaque.
- What color formats are supported?
- Hex in 3, 4, 6, or 8 digits (with or without #), rgb() and rgba() functional notation, and a set of common CSS color names like white, black, red, and gray. You can also use the color pickers.
- Is my data sent anywhere?
- No. The entire check runs in your browser with JavaScript. No colors are uploaded, nothing is stored, and there is no account or sign-up.