WCAG guidelines call out three levels of accessibility compliance: A, AA, and AAA. Level A is the bare minimum, covering basic accessibility features like keyboard navigation, but it does not define minimum color contrast ratios. Level AA is designed to provide an accessible experience for the majority of users, including those with moderate vision impairments and color blindness. Level AA is the standard that most organizations aim for. AA compliance is often a legal requirement for businesses. Level AAA is a stricter standard intended for users with more severe disabilities and is rarely required outside of government websites or specialized apps.

Level AA requires regular text to have a contrast ratio of at least 4.5:1, and large text (18pt, equivalent to 24px in CSS styling) to have at least 3:1. Essential parts of user interface components also need to meet a ratio of 3:1. Meeting these requirements ensures accessibility for most users. It should also help readability in degraded visual conditions, such as screen glare from sunlight or poor display color calibration.

Level AAA requires a contrast ratio of at least 7:1 for regular text and 4.5:1 for large text and important parts of UI elements.

Your website/app actually can have some failing color ratios as long as there is a conforming theme that can be reached from the non-conforming page via an accessibility-supported mechanism. ↗ The link or control on the non-conforming page must itself meet the contrast requirement of the conformance level it's linking to. As an example my website has AA compliant colors, but there is a high-contrast button on my site that applies AAA-compliant colors. The button's icon meets the 4.5:1 contrast ratio.

If you allow the user to choose their own foreground and background colors, those colors do not need to achieve minimum contrast ratios as long as there is a mechanism to change them back to the colors that do. ↗

If text is part of a picture that has significant other content, it has no contrast requirements. For example, if you had a photo that has some street signs in the background. ↗

Bold text that is at least 14pt (18.5px in CSS) only has to meet the requirements for large text.

18pt is equivalent to 24px in CSS units, which scale according to a device's display scaling. It does not mean 24 literal pixels.

Any visual that is necessary to identify that a control is present must have a minimum 3:1 contrast ratio with adjacent colors. ↗

Controls do not need a visual boundary to indicate the hit area. For example if a button has text that passes contrast minimums, then the button's border does not need to pass contrast minimums with its surroundings or even exist at all. ↗

If you only use color to differentiate some body text as a link, then it needs to have a contrast ratio of 3:1 against the color of the body text in addition to having a 4.5:1 ratio against the background. Yes, this severely narrows the amount of colors that can be used in this way. Additionally it needs to gain another visual cue in its active state, such as an underline or outline. But if you have links always distinguished with a visual cue like an outline or icon, then the color doesn't have to have a minimum contrast ratio against the surrounding text. ↗ Links also do not need to have an indication that they are links if they are already distinguished by context, for example text elements in a website's header bar are already commonly understood to be links. If you use a different color to indicate visited link, the visited color does not need to contrast against the unvisited color. ↗

The relative luminance formula accounts for color blindness, but it does fail to account for red text on a black background for individuals with protanopia. ↗ If you're using red on a black background, I recommend increasing your target contrast ratio by 1. For example, if you're aiming for 4.5:1, instead aim for at least 5.5:1.

If a font is anti-aliased or dithered after delivery, the source color is what matters when calculating the contrast ratio. If colors are dithered at the source, like if you applied a texture overlay to the text, then use an averaged sample of the letter's color to calculate the contrast ratio. ↗

If the text is on a photographic background, it only needs to have contrast with the part of the background it's on and not the entire photo. ↗

Text must still meet contrast minimums even when it is in hover, focus, and active states. ↗ The hover, focus, and active states do not have a required minimum contrast between each other. Hover states specifically do not even need to exist, since the user's pointer device is the primary indicator that the component is being hovered on. ↗

If you go around checking the color contrast on popular apps and websites, you'll find that a huge amount of them don't adhere to these standards. A survey by WebAIM tested the top 1 million websites in 2024 and found that 81% of homepages had text that failed WCAG AA color contrast ratio standards.

There is a draft of guidelines for WCAG 3, which may change the color contrast requirements. There were plans to use APCA contrast guidelines, which have a different formula and a scoring system out of 100 instead of a pass/fail criteria. This new model is meant to account for perceived flaws with the current relative luminance formula; some feel that dark colors on light fail too easily and light colors on dark pass too easily. APCA also considers font size and font style in its scoring system. However, it has been removed from the most recent draft of WCAG 3 (writing this in February 2025). Just speculating, it may be because APCA contrast guidelines are not backwards compatible with the current formula, or maybe they're seen as too subjective and cumbersome to be used as an official standard.

Guidance for color contrasts in infographics like charts and graphs

Accessibility Checklist