Color contrast is one part of accessible design
A contrast ratio can reveal a likely readability issue, but accessibility depends on the complete interface and content context. Good contrast helps many people read text, but it does not make a page accessible on its own. A page can pass a contrast check and still be unusable with a keyboard, confusing with a screen reader, or impossible to understand when color is the only cue. This guide explains what contrast ratios mean, how to use them correctly, and what else to check alongside them.
What a contrast ratio measures
A contrast ratio compares the relative luminance of two colors, usually text and its background, and expresses the difference as a ratio such as 4.5:1. Black text on a white background has the maximum ratio of 21:1. As the two colors get closer in brightness, the ratio falls, and the text becomes harder to distinguish. The ratio is a property of the color pair, not of the font, the device, or the reader, which is why it is useful as a repeatable check but limited as a complete measure of readability.
Contrast checkers calculate this ratio for you from two color values. You enter a foreground and background color, and the tool reports the ratio and whether it meets common thresholds. The result is only as reliable as the colors you enter. If you test a brand color on white but the live site places it on a photo, a gradient, or a tinted card, the real contrast may be lower. Always test the actual pairing used in the interface, including hover, disabled, placeholder, and error states.
The WCAG thresholds you will see most often
The Web Content Accessibility Guidelines (WCAG) set widely used minimums. For WCAG 2.1 and 2.2 Level AA, normal text should have a contrast ratio of at least 4.5:1 against its background. Large text, generally defined as at least 18 point, or 14 point bold, needs at least 3:1. Non-text elements that are needed to understand the interface, such as the visible boundary of an input field, the outline of a focused button, or meaningful icons, also need at least 3:1 against adjacent colors.
Level AAA, the stricter tier, raises the bar to 7:1 for normal text and 4.5:1 for large text. AAA is a useful target for long-form reading, but it is not required for every project, and meeting AAA for one pair does not prove the whole page is accessible. Treat the thresholds as minimums, not as design goals. Text that just barely passes at 4.5:1 may still be hard to read for many people in sunlight, on a low-quality screen, or with low vision, so aiming higher when you can is usually worthwhile.
Also note that size and weight matter. A ratio that looks acceptable in a large heading may not meet the same expectation for body copy. Thin, small, or light-weight text is harder to read at the same ratio than larger, bolder text. When you check a page, check body copy, captions, helper text, and placeholder text separately, because those are the places where low contrast causes the most harm.
Worked example: three text colors on white
Consider a simple article page with a white background. The body text is dark grey, the secondary text is medium grey, and a caption is light grey. A checker will typically report a high ratio, around 7:1 or more, for a dark grey such as #595959 on white, which comfortably clears the 4.5:1 minimum for normal text. A medium grey such as #767676 on white sits near the boundary, around 4.5:1, so it may pass for normal text but leaves almost no margin for different screens, gradients, or anti-aliasing. A light grey such as #BBBBBB on white is far below the minimum, around 2:1 or less, and should not be used for body copy, helper text, or anything a reader must understand.
The practical fix is not to guess. Put each real pair into a checker, record the ratio, and adjust the darker color until the pair clears the threshold with some margin. If the brand palette cannot produce a passing pair for small text, reserve the light color for large headings or decorative elements, and use a darker variant for anything that must be read. In the example above, the light grey caption should either be darkened, enlarged and boldened, or treated as decorative rather than essential.
Why passing contrast is not enough
Contrast is only one of many accessibility requirements. A page can have excellent contrast and still fail a user in several ways. If links are distinguished only by color, a reader who cannot perceive that color difference will not know they are links. If an error message says only this field is highlighted in red, a reader who cannot see red will not know which field is wrong. If a chart uses color alone to separate series, the data is hidden from anyone who cannot distinguish those colors.
Interaction matters too. A button with perfect text contrast is still inaccessible if it cannot be reached by keyboard, has no visible focus state, or has no accessible name for a screen reader. A form with high-contrast labels can still be unusable if labels are missing, errors are not announced, or the form cannot be completed at 200 percent zoom. Accessibility is about whether people can perceive, operate, and understand the interface, not just whether they can see the pixels.
Beyond contrast: the checks that complete the picture
Start with meaning, not color. Do not use color as the only way to communicate a status or action. Links inside text should be identifiable by more than color, for example with an underline. Error states should pair color with text, an icon, and a programmatic association to the field. Charts should pair color with labels, patterns, or direct values, so the information survives in greyscale or when printed.
Check structure and navigation. Pages should have a logical heading order, descriptive link text that makes sense out of context, and a visible focus indicator that moves in a sensible order when using the Tab key. Interactive elements should be reachable and operable by keyboard alone, and the focus should never disappear or get trapped. Users should be able to zoom to 200 percent and reflow content without losing information or needing horizontal scrolling for normal text.
Check non-text content. Images that convey information need text alternatives. Decorative images should be marked as decorative so screen readers skip them. Video needs captions, and audio needs a transcript where it carries essential information. Forms need visible labels, clear instructions, and error messages that identify the problem and suggest a fix. Motion that starts automatically should be pausable, and flashing content that could trigger seizures must be avoided.
Check the reading experience. Use plain language where possible, keep sentences and paragraphs manageable, and avoid relying on sensory instructions such as click the green button on the right unless the button also has a text label. Test with real content, not placeholder text, because real headings, error messages, and long words reveal problems that short samples hide.
Worked example: auditing a simple sign-up card
Take a common sign-up card: a heading, an email field, a password field, a show password toggle, an error message, and a submit button. First, check every text pair with a contrast checker: heading, labels, input text, placeholder text, helper text, error text, and button text. Placeholder text is a frequent failure, because it is often light grey and disappears when the user types, so it should never carry essential instructions.
Second, check the non-text parts. The input border should have at least 3:1 contrast against the card background, and the focus outline should be visible and distinct. The error state should not rely on a red border alone: add an error message next to the field, link it to the field, and include an icon or the word Error. The show password toggle should have a text label and a state that is announced, not just a color change.
Third, test the interaction. Tab through the card with a keyboard and confirm every control is reachable, the focus order matches the visual order, and the submit button can be activated with Enter or Space. Zoom the page to 200 percent and confirm nothing is clipped or overlapping. Finally, test with a screen reader if you can, or at least check that each field has a label, the error is announced, and the button has a clear name. A card that passes all of these checks is far more accessible than one that only passes a contrast ratio.
Common mistakes to avoid
- Testing a brand color on white when the live design places it on a photo, gradient, or tinted background.
- Using light grey for placeholder, helper, caption, or disabled text that people must read.
- Using color alone for links, errors, required fields, charts, or status messages.
- Removing the visible focus outline for appearance, or making focus too faint to see.
- Checking only the homepage or one heading, and skipping error, hover, focus, and empty states.
- Treating an automated checker pass as a complete accessibility certificate.
Limitations
A contrast ratio does not measure font quality, line length, spacing, language clarity, or whether the content makes sense. It does not account for glare, screen quality, viewing distance, or individual vision differences. Automated checkers can miss text over images, gradients, video, and dynamically changing backgrounds, and they cannot judge whether a focus order is logical or an error message is helpful. Use the ratio as evidence for one decision, and combine it with keyboard testing, zoom testing, screen reader testing, and review by people with disabilities where possible. This guide is general information, not a legal compliance assessment for a specific product or jurisdiction.
Quick checklist
- Normal text meets at least 4.5:1; large text and essential non-text elements meet at least 3:1.
- Every real color pair is tested in its actual state, including hover, focus, error, and disabled.
- Color is never the only way to convey a link, error, status, or chart value.
- Focus is visible, keyboard order is logical, and all controls work without a mouse.
- Images have alternatives, forms have labels and announced errors, and video has captions.
- Content works at 200 percent zoom, with real content rather than placeholder text.
Use the related tool carefully
This guide is paired with a browser-only utility. The tool is a practical aid for small examples and inspection; it is not a substitute for application testing, a formal data pipeline, or professional review where the decision has higher consequences.
Open the related WCAG Color Contrast Checker
Related tools in this category
Frequently asked questions
What contrast ratio do I need for normal text?
For WCAG 2.1 and 2.2 Level AA, normal text needs at least 4.5:1 against its background. Large text needs at least 3:1. Treat these as minimums and aim higher when you can, especially for body copy, because a bare pass can still be hard to read in poor lighting or on a low-quality screen.
Does passing a contrast checker mean my site is accessible?
No. A contrast ratio is evidence for one decision, not a complete compliance certificate. You still need to check keyboard navigation, focus, screen reader behaviour, zoom and reflow, form labels and errors, alternatives for images, captions, and whether color alone carries meaning. Automated tools can miss many of these issues.
Can I use color alone if the colors look very different to me?
No. Colors that look distinct to one person may be hard to distinguish for someone with color vision differences, and they disappear entirely in greyscale or when printed. Always pair color with another cue, such as text, an underline, an icon, a pattern, or a label, so the meaning survives without color.
What about text over images or gradients?
Test the worst case, not the average. Text over a photo or gradient can pass on one part of the image and fail on another. Use a solid overlay, a background behind the text, or a darker scrim to stabilise the contrast, and recheck after the overlay is applied. If you cannot guarantee contrast across the image, do not place essential text directly on it.