Color Contrast Ratio: WCAG Requirements and How to Check

What is a color contrast ratio?

A contrast ratio is a number that describes the difference in brightness between two colors, usually text and the background behind it. WebAIM explains that contrast is a measure of the difference in perceived luminance between two colors, expressed as a ratio ranging from 1:1 (white on white) to 21:1 (black on white).

Higher is easier to read. A ratio of 1:1 means the two colors are identical, so the text disappears. A ratio of 21:1 is the maximum possible. Because the ratio is based on luminance, or perceived brightness, rather than hue, two colors can look quite different and still have poor contrast if they are similarly bright.

You do not need to calculate the ratio by hand. Contrast checkers take two colors, usually as hex codes, and report the ratio and whether it passes each WCAG level.

WCAG color contrast requirements at a glance

WCAG defines several related success criteria. The three that matter most for everyday design are listed below. Level AA is the conformance level most commonly set as a target in accessibility policies, so 4.5:1, 3:1, and 3:1 are the numbers to remember. Level AAA is a higher bar that is not expected for every page but is worth meeting for body text when you can.

• 1.4.3 Contrast (Minimum), Level AA: text and images of text need a contrast ratio of at least 4.5:1, and large-scale text needs at least 3:1.
• 1.4.6 Contrast (Enhanced), Level AAA: text needs at least 7:1, and large-scale text needs at least 4.5:1.
• 1.4.11 Non-text Contrast, Level AA: user interface components and the graphical objects needed to understand content need at least 3:1 against adjacent colors.

What counts as large text?

The lower 3:1 threshold applies only to large-scale text. The W3C defines this as text of at least 18 point, or at least 14 point if it is bold. In CSS pixels, the W3C says 14 point and 18 point are equivalent to approximately 18.5px and 24px.

Everything smaller than that is normal text and needs 4.5:1. Headings often qualify as large text and body copy rarely does, so do not assume your paragraph text can use the lower ratio.

Which elements are exempt?

WCAG exempts a few things from the text contrast requirement. According to the W3C these include text that is part of an inactive user interface component, such as a disabled button, pure decoration, text that is not visible to anyone, and text that is part of a logo or brand name.

The exemptions are narrower than they sound. A gray label that merely looks inactive but can still be clicked is not exempt, and a decorative image does not excuse low contrast on text placed over it. If a person needs to read it or operate it, plan for it to meet the ratio.

Contrast for buttons, form fields, and icons

Success criterion 1.4.11 extends contrast beyond text. The W3C requires a 3:1 contrast ratio against adjacent colors for the visual information needed to identify user interface components and their states, and for graphical objects required to understand content, with an exception for inactive components.

In practice this covers the border of a text input, the outline of a checkbox, the tick inside it, toggle states, and focus indicators. The W3C notes that a control needs a sufficiently contrasting focus indicator even when it has no visible border. A very pale gray input border on a white page is a typical failure.

Why you cannot round the ratio

A ratio has to actually reach the threshold. The W3C states that computed values should not be rounded, so 4.499:1 does not meet 4.5:1. WebAIM makes the same point with a familiar example: #777777, a commonly used shade of gray, has a contrast ratio of 4.47:1 and therefore fails.

So when a checker reports 4.4:1, the fix is not to argue that it is close. Darken the text or lighten the background a little until it clears the number.

Real examples with calculated ratios

Numbers are easier to trust when you can see them on familiar colors. The ratios below are calculated for each color on a white (#ffffff) background using the WCAG relative luminance formula.

• #000000 (black): 21:1, the maximum possible ratio.
• #595959 (dark gray): about 7.0:1, enough for Level AAA body text.
• #767676 (medium gray): about 4.54:1, the lightest neutral gray that still passes Level AA for normal text.
• #777777 (one step lighter): about 4.48:1, which fails the 4.5:1 requirement even though it looks almost identical.
• #949494 (light gray): about 3.03:1, which only passes for large text and interface components.

How to check color contrast

Checking takes a minute once you know what to test. The goal is to cover every combination people will actually see, not just the main ones.

• Use a contrast checker. Enter the foreground and background colors as hex codes, and the tool reports the ratio and whether it passes AA and AAA. WebAIM publishes a free Color Contrast Checker.
• Check every text and background pair, including links, placeholder text, captions, footers, buttons in hover and focus states, and text on dark sections.
• Test the lowest-contrast area. WebAIM recommends testing where contrast is lowest, particularly with gradients and semi-transparent backgrounds, because text may pass on one part of a gradient and fail on another.
• For text over photos, test the worst case: the lightest or busiest part of the image behind the words, or place a solid or semi-opaque panel behind the text.
• Look at the page on a real phone at reduced brightness. Passing ratios do not guarantee comfort, but they catch most problems.

How to fix a failing color pair

The fix is usually small. Darken the text, lighten the background, or both, until the ratio clears the threshold. Staying in the same hue keeps your brand feel, because you are only changing lightness.

• For light gray text on white, move to a darker gray rather than switching hue.
• For white text on a mid-tone brand color, use a darker shade of the brand color for that use, such as a button background, instead of changing the text color.
• For placeholder text and labels that people still need to read, avoid pale gray and choose a color that passes.
• For text on photos, add an overlay or a solid panel instead of hoping the picture stays dark enough.
• For charts and icons, add a darker outline or use patterns and labels so the meaning does not depend on a pale fill.

Color should never be the only signal

Contrast is about differences in brightness, but a related WCAG requirement is that color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. WebAIM emphasizes adding a secondary cue, such as an icon or a text label.

A form error shown only by turning a border red fails people who cannot see that color difference, so add an error message with an icon. In the same way, make links recognizable by more than a subtle shift in shade, for example with an underline.

How to build contrast into your color palette

Checking colors one at a time works for a single page, but it does not scale. A better approach is to settle the approved combinations once, when you define the palette, so designers and developers pick from pairs that already pass.

Treat each text color and each background color as a pair, test the pair, and record the ratio next to it in your style guide. Include the states people forget: hover, pressed, focus, disabled-but-readable, error, and success. Record both the light theme and the dark theme, since a pair that passes in one often does not translate directly to the other.

When the brand color is too light for text or buttons, define a darker companion shade for those uses. You keep the brand identity in logos and large decorative areas while giving interactive elements and small text enough contrast. Re-test the whole set whenever a color changes, because a small tweak can push an old pair under the threshold.

Common questions about color contrast

Does dark mode need to meet the same ratios? Yes. The requirements apply to the colors people actually see, so check light and dark themes separately.

Do logos have to meet the ratio? Text that is part of a logo or brand name is exempt from the text contrast requirement, but that does not excuse low contrast in the surrounding page text.

Is meeting the ratio enough to make a page accessible? No. Contrast is one part of accessibility, alongside text size, keyboard access, visible focus, headings, and alternative text. It is, however, one of the quickest things to test and fix.