Question 1

Does font size and font weight actually change the required contrast ratio?

Accepted Answer

Yes, typography plays a massive role in accessibility standards. Under WCAG 2.x, the baseline requirement for normal text is a 4.5:1 ratio. However, if your text is large—specifically defined as 18 points (roughly 24 pixels) in regular weight, or 14 points (roughly 18.5 pixels) in bold weight—the requirement drops significantly to a 3.0:1 ratio. This is because larger, thicker letterforms occupy more physical pixels on the screen, making them inherently easier for the human eye to perceive even when the color difference is less pronounced. It is critical to note that using a thin or light font weight never lowers the requirement; thin fonts at large sizes may still require higher contrast to be truly readable, even if they technically pass the 3.0:1 threshold.

Question 2

Are there any exceptions where I don't need to meet contrast requirements?

Accepted Answer

Yes, the WCAG specification explicitly outlines three distinct scenarios where color contrast rules do not apply. First, text or icons that are part of an inactive (disabled) user interface component, such as a greyed-out "Submit" button on an incomplete form, are exempt. Second, pure decoration—elements that are purely aesthetic, convey no information, and are completely invisible to screen readers—require no contrast. Finally, any text that is part of a corporate logo or brand name is entirely exempt. You are never legally required to alter a company's trademarked logo to meet a 4.5:1 contrast ratio, though it is often considered good practice to provide a high-contrast alternative version.

Question 3

How do I test the contrast of text placed over a photograph or image?

Accepted Answer

Testing text over an image is notoriously difficult because a photograph contains thousands of different colored pixels. Automated tools cannot reliably test this. To do it manually, you must find the specific area of the photograph that sits directly behind the text. You must sample the lightest pixel (if your text is dark) or the darkest pixel (if your text is light) that immediately touches the letterforms. You then run that specific pixel's hex code against your text color in the algorithm. Because this is highly unreliable, especially on responsive websites where images shift sizes, the best practice is to avoid the problem entirely by placing a solid-colored, semi-transparent overlay between the image and the text to guarantee a mathematical baseline of contrast.

Question 4

Can my company actually get sued for having bad color contrast?

Accepted Answer

Absolutely. In many jurisdictions, including the United States, digital accessibility is treated as a civil right under laws like the Americans with Disabilities Act (ADA) Title III. Over the past decade, thousands of lawsuits have been filed against companies of all sizes—from local restaurants to massive corporations like Domino's Pizza and Target—for failing to make their websites accessible. Color contrast failures are one of the most common, easily provable violations cited in these lawsuits because they can be detected instantly by automated scanning software. Failing to meet the WCAG 2.1 Level AA standard of 4.5:1 for text is a direct legal liability that can result in costly settlements, forced redesigns, and significant reputational damage.

Question 5

What is the difference between WCAG Level AA and Level AAA?

Accepted Answer

Level AA is the global, legally accepted standard for web accessibility. It requires a 4.5:1 contrast ratio for normal text and 3.0:1 for large text, which is sufficient to accommodate users with 20/40 vision (typical of an 80-year-old). Level AAA is a much stricter, aspirational standard designed to accommodate users with 20/80 vision. It requires a massive 7.0:1 contrast ratio for normal text and 4.5:1 for large text. Most government legislation only mandates Level AA compliance. Achieving Level AAA across an entire website is extremely difficult and heavily restricts your design palette, so it is usually reserved for dedicated accessibility modes, specialized government portals, or websites built specifically for the visually impaired.

Question 6

Why does my contrast checker say my white text fails on an orange background, even though it looks fine to me?

Accepted Answer

This is the most famous flaw in the WCAG 2.x relative luminance algorithm. The mathematical formula heavily weights the green channel of light because the human eye is most sensitive to green. Bright orange contains a massive amount of red and green light, giving it a very high mathematical luminance score. Because white also has a high luminance score (1.0), the formula calculates that there is not enough mathematical distance between the two, resulting in a failure. However, human perception relies on more than just luminance; we also perceive contrast through hue and saturation. While the math says it fails, your eyes are correctly telling you it is readable. Unfortunately, until the new APCA algorithm is legally adopted in WCAG 3.0, you must follow the math and use darker text or a darker background to pass official audits.

Color Contrast Checker (WCAG)

Command Palette