Understand WCAG 2.2 contrast ratios: the AA and AAA thresholds for normal text, large text, and UI components, plus exceptions and how to check colors.
Reviewed by the Utility Tally Editorial Team | Last updated May 14, 2026
A contrast ratio is a number that describes how different two colors look when one sits on top of the other. In accessibility work, it measures the difference in relative luminance between the foreground color and the background color. The scale runs from 1:1, which means no meaningful difference between the pair, up to 21:1, which is the strongest possible contrast. Black text on a white background sits at the top of that scale.
Relative luminance is a weighted measure of how bright a color appears to the human eye, not just its raw RGB values. Green contributes more to perceived brightness than blue does, which is why two colors with similar hex codes can still produce different ratios against the same background. The calculation always divides the lighter color by the darker one, so the same pair gives the same ratio no matter which color you call the foreground.
A worked example makes this concrete. Pure white has a relative luminance close to 1.0 and pure black sits near 0.0. The formula adds a small constant of 0.05 to both sides so that pure black still produces a measurable value instead of a division by zero, which gives about (1.0 + 0.05) divided by (0.0 + 0.05), or 21:1. That is the maximum on the scale, and it is why black on white is the readability benchmark every other pair is compared against.
Now try a mid gray such as #777777 on white. Its relative luminance works out to roughly 0.18, so the ratio is about 1.05 divided by 0.23, which lands right around 4.5:1. That single number explains why so many design systems use that gray as a muted text color: it just barely clears the most common threshold, and anything lighter starts to fail.
WCAG 2.2 defines two conformance levels that matter for color: AA and AAA. For normal body text, AA requires a ratio of at least 4.5:1, while AAA raises the requirement to 7:1. Most websites, government sites, and procurement checklists target AA, and AAA is treated as an enhanced goal rather than a baseline. You can think of AA as the pass mark and AAA as the stretch target.
Large text gets a lower requirement because bigger letters with thicker strokes remain readable at lower contrast. Under WCAG, large text means roughly 18 point, about 24 pixels, at regular weight, or 14 point, about 18.66 pixels, at bold weight. For large text, AA asks for 3:1 and AAA asks for 4.5:1. That is why a big headline can use a lighter brand color that would never work for a body paragraph.
These thresholds apply to any text the user must read, including text baked into images, with a few exceptions. Text that is part of a logo or brand name, text that is purely decorative, and text in inactive interface components such as a disabled button are exempt. Text in a placeholder or a tooltip still counts as real text, so treat those pairs as part of the audit rather than skipping them.
The contrast rules are not limited to text. WCAG includes a separate non-text contrast requirement at AA that asks for 3:1 between the visual information needed to understand a control or graphic and its surroundings. That covers icons, buttons, form fields, progress bars, charts, checkboxes, and the boundaries that show where one interactive element ends and another begins.
A button is a good example. The label inside the button follows the text rules, but the button shape or border that lets people see where it starts and ends is a graphical object, so it needs 3:1 against the page background. A solid filled button with a light label often passes because the fill itself carries the contrast, while a ghost button with a thin outline may fail if the outline is too pale.
Non-text contrast has exceptions as well. Decorative elements that carry no information, disabled or inactive controls, and logotypes are exempt from the 3:1 requirement. There is no separate AAA version of the non-text rule, so 3:1 remains the target for UI components at both AA and AAA. Focus indicators also benefit from a strong contrast against adjacent colors so keyboard users can see where they are.
The fastest way to check a pair is to run it through a contrast checker. The color contrast checker on this page lets you enter a foreground and background color, and it returns the ratio together with a readout of whether the pair clears AA and AAA for normal text, large text, and UI components. Paste the hex values from your design and the tool does the luminance math for you in a couple of seconds.
Check the pairs you actually use, not just the hero ones. That means body text on the page background, muted captions, link colors, button labels, form labels, placeholder text, error messages, and any icon that carries meaning on its own. Each of those is a separate pair, and each can fail on its own even when the rest of the design passes.
Remember that the large text classification depends on the final size and weight. A 12 pixel caption is normal text even if it looks airy, while a bold 20 pixel heading may qualify as large text. When in doubt, test the pair at the smallest size and lightest weight it will actually appear in, because that is the version people will struggle with first.
Do not rely on color alone to convey meaning. A pair with a passing ratio still does not help someone who cannot tell those two colors apart in the first place, and WCAG guidance treats color as only one channel of information. Pair color with text, icons, patterns, or underlines for states like errors, warnings, links, and required fields so the meaning survives any form of color vision deficiency.
Test with your real palette in real contexts. A brand blue that passes on white may fail on a pale gray card or inside a photo. Gradients, hover states, focus rings, and disabled versions all change the effective background, so verify each state instead of approving colors one at a time. The contrast checker gives you a ratio for a single pair, and you should collect those ratios for every combination your layout actually renders.
When a pair fails, the fix is usually small. Darken the text slightly or lighten the background, and a ratio that was sitting at 3.9:1 often climbs to 4.5:1 without changing the feel of the design. Keep a short record of the ratios for your core pairs, so the next time someone adjusts a color, the change can be checked against the same list instead of rediscovered the hard way.
Finally, treat contrast as part of the design review rather than a last-minute audit step. If one color changes for a new screen or a rebrand, retest every pair that uses it, because a small shift in luminance can quietly push a previously passing combination below the threshold.
Start with the related tools listed on this page, but use them as part of a review process rather than as a final answer by themselves. The strongest workflow is to prepare clean inputs, run the tool, inspect the result, and then check the output in the place where it will actually be used. That may mean scanning a QR code from a printed sample, importing a small JSON file before a full upload, reviewing an invoice total against your records, or checking a color pair in the real layout.
If the task involves customer data, tax rules, passwords, production systems, accessibility requirements, or anything that affects a client or account, add a second review step. Browser tools are useful because they are fast and focused, but the final decision still belongs to the person who understands the context, destination system, and consequences of using the result.
The related articles are included so you can move sideways through the workflow instead of treating the topic as isolated. For example, a guide about campaign links may connect to QR testing, while a guide about JSON may connect to CSV cleanup or encoding decisions. Following those links helps catch common edge cases before the output becomes part of a public page, business document, data import, or support process.
When a result matters, save a simple record of the assumptions you used. That might be the original text, selected settings, destination URL, timezone, file dimensions, or source data shape. Keeping those notes makes it easier to explain the output, repeat the workflow, or spot what changed if a future result looks different.
For most content, aim for 4.5:1 for normal text and 3:1 for large text or UI components, which is WCAG AA. The stricter AAA goal is 7:1 for normal text. Higher ratios are generally easier to read.
Yes for AA compliance, which is the common target for websites. AAA asks for 7:1, but AA is usually the practical requirement and 4.5:1 already covers the majority of readers well.
AA is the standard accessibility level: 4.5:1 for normal text and 3:1 for large text and UI components. AAA is the enhanced level: 7:1 for normal text and 4.5:1 for large text.
No. WCAG exempts logotypes and brand marks from contrast requirements, but any text or controls around the logo still need to pass.
Enter the foreground and background hex values into a contrast checker, such as the one on this page. It calculates the ratio and tells you which WCAG levels the pair meets for normal text, large text, and UI components.
Check every real color pair against the AA thresholds, keep 7:1 as an enhanced goal, and retest whenever a color changes.