WCAG Color Contrast Checker
This free color contrast checker measures the contrast ratio between a foreground (text) color and a background color and tells you, instantly, whether the pair meets the WCAG 2.1 accessibility requirements. Enter each color as a hex code, rgb()/rgba(), hsl()/hsla(), or a common CSS color name, or click the swatch to pick one visually. You get the exact ratio (for example 4.53:1), pass or fail badges for AA and AAA at both normal and large text sizes plus the 3:1 non-text threshold for UI components, a live preview of real sample text in your colors, and the same color shown in hex, RGB, and HSL so you can copy whichever format you need.
It is built for designers and developers checking that body text, buttons, links, and interface elements are legible for everyone, including people with low vision or color-vision deficiency. Everything runs locally in your browser with JavaScript — the colors you enter are never uploaded or stored.
How to use Color Contrast Checker
- Enter the foreground (text) color and the background color as hex (#1f2937), rgb()/rgba(), hsl()/hsla(), or a CSS color name — or click the color swatch to pick one.
- Read the contrast ratio shown at the top (for example 4.53:1) and the summary of the highest level it passes.
- Check the pass and fail badges for AA normal, AA large, AAA normal, AAA large, and UI components and graphics.
- Look at the live preview to see how the colors read on normal and large sample text.
- If the pair falls below AA, use the suggested nearest passing color, or adjust a color and re-check.
- Copy the color as hex, RGB, or HSL from the conversion panel, and use Swap to flip the foreground and background.
WCAG 2.1 contrast thresholds
- AA, normal text — at least 4.5:1 (WCAG Success Criterion 1.4.3, Contrast Minimum).
- AA, large text — at least 3:1.
- AAA, normal text — at least 7:1 (WCAG Success Criterion 1.4.6, Contrast Enhanced).
- AAA, large text — at least 4.5:1.
- UI components and graphical objects — at least 3:1 (WCAG Success Criterion 1.4.11, Non-text Contrast) for things like input borders, icons, and focus indicators.
- Large text is defined as 18pt (about 24px) or larger, or 14pt (about 18.66px) or larger when bold.
How the contrast ratio is calculated
The checker follows the WCAG 2.1 definition exactly. Each sRGB channel value is divided by 255 and linearized: values at or below 0.03928 are divided by 12.92, and higher values use ((c + 0.055) / 1.055) raised to the power 2.4. The relative luminance is then 0.2126 times red, plus 0.7152 times green, plus 0.0722 times blue.
The contrast ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's relative luminance and L2 is the darker one's. Ratios range from 1:1 (identical colors) to 21:1 (pure black on pure white). A pair passes a level when its ratio is greater than or equal to that level's threshold.
Transparency and alpha
WCAG defines contrast for solid colors, so a semi-transparent color has to be flattened before it can be measured. When you enter an alpha value (through #rrggbbaa, rgba(), or hsla()), the checker composites the background over white, then composites the foreground over that resulting background, and measures the flattened result — the same colors your eye actually sees in the preview.
Because a translucent background could sit over any color, flattening it over white is an assumption, not a guarantee; if your real background differs, enter its actual solid color for an exact result.
Related terminology
- Contrast ratio
- A number from 1:1 to 21:1 describing the difference in relative luminance between two colors. Higher ratios are easier to read; WCAG AA requires at least 4.5:1 for normal text.
- Relative luminance
- The perceived brightness of a color on a 0 to 1 scale, computed from gamma-corrected (linearized) red, green, and blue components as defined by WCAG.
- WCAG
- The Web Content Accessibility Guidelines, the W3C standard for accessible web content. Levels AA and AAA set the contrast thresholds used here.
- Large text
- Text at 18pt (about 24px) or larger, or 14pt (about 18.66px) or larger when bold. It qualifies for a lower contrast threshold because larger shapes are easier to distinguish.
- Alpha compositing
- Blending a semi-transparent color over a background to produce the single solid color that is actually displayed, using the formula result = source x alpha + background x (1 - alpha).
- sRGB
- The standard red-green-blue color space used by the web. Its channel values must be linearized before luminance can be computed.
Frequently asked questions
- What contrast ratio do I need to meet WCAG AA?
- For Level AA, normal text needs a contrast ratio of at least 4.5:1, and large text needs at least 3:1. Large text means 18pt (about 24px), or 14pt (about 18.66px) and bold.
- What is the difference between AA and AAA?
- AAA is the stricter, enhanced level. It requires at least 7:1 for normal text and 4.5:1 for large text, compared with AA's 4.5:1 and 3:1. Most projects target AA; AAA is used where the highest legibility is required.
- Does the 3:1 UI components check mean something different from large text?
- Yes. Although the number is the same, the 3:1 UI-components result reflects WCAG 1.4.11 Non-text Contrast, which applies to interface parts such as input borders, icons, and focus indicators rather than to blocks of text.
- Can I check colors with transparency (rgba or hsla)?
- Yes. Enter an alpha value using #rrggbbaa, rgba(), or hsla() and the checker composites the foreground over the background (over white) before measuring, so the ratio matches what is actually shown.
- Why does my ratio differ slightly from another tool?
- Small differences usually come from rounding or from how each tool treats transparency. This checker computes luminance from unrounded channel values and flattens translucent colors over white, which can differ from a tool that assumes a different backdrop.
- Are the colors I enter uploaded anywhere?
- No. All parsing and contrast math run entirely in your browser with JavaScript, so nothing you type is sent to a server.