Color Contrast Rules: WCAG Ratios, Examples and How to Check

The color contrast rules in WCAG 2.2 come down to three numbers. Normal text needs a contrast ratio of at least 4.5:1 against its background, large text and meaningful interface parts (buttons, input borders, icons, chart elements) need at least 3:1, and the stricter AAA level asks for 7:1 on normal text and 4.5:1 on large text. If you have two hex codes and want a verdict, our color contrast checker calculates the ratio in your browser. The rest of this article explains what the numbers mean, where the rules stop applying, and how to read results without guessing.

TL;DR

• Normal text (AA): at least 4.5:1. Large text (AA): at least 3:1. Non-text elements such as input borders and icons (AA): at least 3:1.
• AAA raises the bar to 7:1 for normal text and 4.5:1 for large text. AA is the level most laws and policies reference; AAA is a goal rather than a typical requirement.
• “Large” means roughly 18 point, or 14 point bold. Anything smaller is normal text.
• Ratios run from 1:1 (identical colors) to 21:1 (black on white), and they measure brightness difference, not hue difference.
• Check the actual hex or RGB values rather than judging by eye, and never rely on color alone to carry meaning.

Table of Contents

• What a contrast ratio actually measures
• The numbers by level and content type
• Worked examples: pairs that pass and fail
• How to check color contrast
• Text over images, gradients and transparency
• What the rules do not cover
• Beyond ratios: do not rely on color alone
• Choosing accessible color combinations
• Use GizmoBench for the quick checks
• FAQ
• Sources

What a contrast ratio actually measures

A contrast ratio is a single number describing how far apart two colors are in relative luminance, which is a measure of how much light a color gives off. The WCAG 2.2 definition uses the formula (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 is that of the darker one. The 0.05 offsets keep the math stable when one color is near black.

Two consequences follow from the formula. First, the scale is fixed: ratios range from 1 to 21, with 1:1 for two identical colors and 21:1 for pure black on pure white. Second, the ratio is symmetrical. Light gray on dark blue and dark blue on light gray produce the same number, so only the pair matters, not which one is the text.

The ratio is built on luminance because brightness difference is what makes shapes readable for nearly everyone. MDN notes that luminance contrast lets people with color blindness tell dark from light, which is why the calculation deliberately plays down hue. A red and a green with the same luminance can look different to someone with typical color vision and nearly identical to someone with a color vision deficiency; the ratio would call that pair 1:1.

Why 4.5:1 and not some other number

The threshold has a stated rationale. The W3C explains that 4.5:1 was chosen for Level AA to compensate for the loss of contrast sensitivity typical of vision loss around 20/40. Large text uses 3:1 because larger, thicker letterforms stay legible at lower contrast. We read this as a practical floor rather than a guarantee: a pair that passes at 4.5:1 is not automatically comfortable for everyone, and it says nothing about font weight, line length or ambient light.

The numbers by level and content type

The table below summarizes the thresholds in WCAG 2.2, drawing on the official guidelines and the Understanding documents for 1.4.3 and 1.4.11.

Two definitions decide which row applies to you.

Large text. The W3C treats 18 point text or 14 point bold text as large enough for the lower ratio, with a caveat that “bold” and point sizes vary across fonts, though the general measures work except for very thin or unusual typefaces. On screens, 18 point is typically 24 CSS pixels and 14 point is about 18.66 pixels. Our PX to REM converter is handy when your stylesheet is in rem and you need to know whether a heading crosses that line.

Non-text elements. Criterion 1.4.11 asks for 3:1 against adjacent colors for the visual information needed to identify user interface components and their states, and for parts of graphics needed to understand content. In practice that covers a text input’s border, a checkbox outline, a focus ring, an icon-only button, and the lines or bars in a chart. Inactive components and cases where the browser controls the appearance are excepted.

AA or AAA: which should you aim for

AA is the working standard. In the United States, Section 508 guidance states that where the standards apply, software, web content and documents must meet the WCAG 2.0 AA color requirements, including 1.4.1 (use of color) and 1.4.3 (contrast). Newer WCAG versions keep these thresholds. MDN suggests aiming for AAA where possible and meeting AA at a minimum, which is sensible for long-form reading text, where the extra margin costs little. Whether a specific law or contract applies to you is a question for your compliance contact; this article describes the technical thresholds only.

Worked examples: pairs that pass and fail

For this section we computed the ratios ourselves with the WCAG formula above, using sRGB hex values on a white (#FFFFFF) background. These are calculations, not findings from a study, and you can reproduce each one in the checker.

A few patterns are worth drawing out.

• #767676 versus #777777 is the famous edge. One step in each channel separates a pass from a fail. Rounding matters here, so do not round 4.48 up to 4.5; the criterion says “at least” 4.5:1, and checkers that round can mislead you.
• Pure red on white fails for body text. It looks strong, but at 4.0:1 it only suits large text or non-text elements. A darker red is the usual fix.
• Yellow and orange on white fail for everything. Bright warm colors have high luminance, so they sit close to white. Use them as fills with dark text on top, not as text.
• White text on a colored button flips the problem. White on #1A73E8 blue works out to 4.51:1, a narrow pass for normal text. White on #FFA500 orange is 1.97:1, a clear fail; dark text on orange would pass comfortably.

The lesson from the table is that visual intuition about “strong” colors misleads. Saturated colors are not necessarily high-contrast, and some muted dark colors beat them.

How to check color contrast

A reliable check has four steps.

1. Get the real values. Section 508 guidance says to verify the programmatic hex or RGB values rather than judge by eye, because visual judgment is unreliable. If you only have a screenshot or a logo file, sample the pixel with an image color picker to get a hex code.
2. Enter foreground and background. In the GizmoBench contrast checker, enter both hex codes. The tool reports the ratio and compares it with the AA and AAA thresholds, and it also handles opacity and suggests fixes, as its page describes.
3. Read the result against the size. A UK government accessibility manual puts it plainly: if your tool cannot read font details, enter the hex codes and then interpret the result against the font size. A 4.0:1 result is a pass for a 24 px heading and a fail for 16 px body copy.
4. Repeat for every state. Hover, focus, disabled-looking, selected and error states each have their own color pair. Test the pairs a user actually sees.

Section508.gov lists ANDI, a web-based contrast checker and the Colour Contrast Analyser as commonly used tools, and browser developer tools show a ratio when you inspect a text element. Each has strengths; use whichever fits your workflow, as long as it takes real color values.

Anti-aliased text

Text edges blur into the background on screen, which complicates measuring from a screenshot. The W3C’s technique for this case says to measure relative luminance two pixels in from the edge of the letter for aliased letters. Reading the CSS color values avoids the problem altogether.

Text over images, gradients and transparency

Solid colors are the easy case. Real pages also have photo banners, gradients and semi-transparent layers, and the rule is the same: the text must meet its ratio against the background immediately behind it. The guidelines describe fixes for variable backgrounds: a solid shade behind the text, a text border, or a different background area so the required 4.5:1 or 3:1 holds consistently.

Some practical consequences:

• Gradients: test the lightest and darkest points under the text, and the worst one governs. Our CSS gradient generator lets you pick stops that you can then check individually.
• Photos: sample several background pixels beneath the text. If any region fails, add a dark overlay or move the text.
• Transparency: an rgba color blends with whatever is underneath, so the effective color is not the one in your stylesheet. Check the blended result, which is why a checker that understands opacity is useful.
• No background set: WCAG evaluation is based on the color pairs an author expects to appear adjacent in typical presentation, and assumes white when no background is specified. Setting both foreground and background explicitly in your CSS avoids surprises when a user’s browser overrides defaults.

What the rules do not cover

The contrast minimum has defined exceptions. Text or images of text that are part of an inactive user interface component, pure decoration, content not visible to anyone, or logotypes have no minimum. The W3C text adds that text inside a picture with significant other visual content is also exempt.

Exceptions are narrower than they sound. A “disabled” look applied to a button that still works does not qualify, and a decorative flourish is not the same as a faded caption. If you are building a public-facing site such as an event page, a guide to WCAG 2.2 for event websites shows how these requirements play out for organizers who build pages without an agency. When in doubt, meet the ratio.

Beyond ratios: do not rely on color alone

Passing contrast does not make a design accessible by itself. Criterion 1.4.1, use of color, is a separate requirement: information should not be conveyed by color alone. Section508.gov recommends adding patterns, textures or text labels so users with color vision deficiencies or low vision can understand the interface whatever colors they can distinguish.

Typical fixes:

• Show form errors with an icon and a message, not just a red border.
• Underline links inside paragraphs, or give them a clear non-color cue.
• Label chart series directly or use different marker shapes in addition to different colors.
• Mark required fields with text, not only a colored asterisk.

To see how a palette behaves for people with color vision deficiencies, run it through a color blindness simulator. It will not replace a ratio check, but it exposes pairs that differ in hue and little else.

Choosing accessible color combinations

Start from the text color and background that carry most of the page, then work outward.

1. Fix a dark text and a light background (or the reverse) that clear 7:1. This gives you margin for body copy.
2. Pick an accent color for links and buttons that reaches 4.5:1 on the background, since link text is normal text. A mid-range blue like #0B5CAD on white (6.67:1) is comfortable.
3. Define borders and icons at 3:1 or better against the surfaces they sit on.
4. Test pairings you did not plan, such as an accent on a tinted card, or white text on the accent.

A color palette generator with contrast ratios shortens this process by showing the ratios as you build the set. If a brand color fails, a common solution is to keep the brand shade for large fills and logos and use a darkened version of the same hue for text. You can find the closest named CSS color for any hex with the color name finder, useful when documenting a palette for a team.

A caution on contrast tools in general: a ratio is a floor for legibility, not a design review. Very thin fonts, tiny sizes and long line lengths can make a technically passing pair hard to read. Test with real content and, where you can, real users.

Use GizmoBench for the quick checks

The color contrast checker on GizmoBench runs in your browser, with no account and no installation, so your palette stays on your device. It pairs well with the color palette generator and the color blindness simulator above, and the wider collection of everyday calculators and converters lives on our everyday tools page. Core tools are free to use without signing up.

FAQ

What is a good color contrast ratio?

For normal text, 4.5:1 is the AA minimum and 7:1 is the AAA target. Large text and interface elements need 3:1 at AA. If you can reach 7:1 for body copy without hurting your design, the extra margin helps readers with low vision and anyone reading in bright light.

What does 4.5:1 contrast mean?

It means the lighter color’s relative luminance, offset by 0.05, is 4.5 times the darker color’s, offset the same way. It is a measure of brightness difference, not of hue. The W3C selected the number to compensate for contrast sensitivity loss typical of vision around 20/40.

Do the contrast rules apply to logos and disabled buttons?

No minimum applies to logotypes or to text in inactive user interface components. The exception is narrow: a control that still works but looks faded is not inactive, so it still needs to meet the ratio.

Is the 3:1 ratio only for large text?

No. At AA, 3:1 applies to large text, and also to user interface components and meaningful graphics under criterion 1.4.11. Normal-size text still needs 4.5:1 even when it sits inside a button or a chart label.

Can I judge contrast by eye or from a screenshot?

It is unreliable. Use the actual hex or RGB values from your CSS or design file, or sample the exact pixel color if you only have an image. Then compare the ratio with the threshold for the text size and element type.

Sources

• Web Content Accessibility Guidelines (WCAG) 2.2, W3C
• Understanding Success Criterion 1.4.3: Contrast (Minimum), W3C
• Understanding Success Criterion 1.4.11: Non-text Contrast, W3C
• G18: Ensuring a contrast ratio of at least 4.5:1, W3C
• Color contrast, MDN Web Docs
• Colors and luminance, MDN Web Docs
• Making Color Usage Accessible, Section508.gov
• Colour contrast: how to test, DWP Accessibility Manual
• Contrast for text and images of text, New Zealand Government web accessibility guidance

Recommended

• Color Contrast Checker: WCAG 2.2, Opacity and Fixes
• Color Palette Generator With Contrast Ratios
• Color Blindness Simulator: Image and Palette
• Color Name Finder: Nearest CSS Color Name to Any Hex