Skip to content

Graphic Design Fundamentals for Creators and Marketers · Color theory and accessible contrast · lesson 11 of 18 · 7 min

Accessible contrast and inclusive color use

Why accessibility is a design requirement

A significant share of people have some form of visual impairment, color vision deficiency, or situational limits such as bright sunlight, a cracked screen or a low-brightness setting. Designs with weak contrast exclude these viewers and perform worse for everyone. Accessibility is also increasingly a legal expectation for websites and apps in many jurisdictions, and a reputational one everywhere.

WCAG contrast ratios

The Web Content Accessibility Guidelines (WCAG), published by the W3C, are the widely used international standard. WCAG 2.2 is the current recommendation. For contrast, the key success criteria at level AA are:

| Content | Minimum ratio (AA) | Enhanced (AAA) | |---|---|---| | Normal text | 4.5 : 1 | 7 : 1 | | Large text (about 24 px regular, or about 18.66 px bold and above) | 3 : 1 | 4.5 : 1 | | User-interface components and meaningful graphics (icons, input borders, chart lines) | 3 : 1 | — |

Contrast ratio ranges from 1:1 (no contrast — same color) to 21:1 (black on white). These criteria were written for web content, but they are an excellent benchmark for social graphics, slides and ads too.

Note that WCAG 3 is in development and explores a different contrast model; until it becomes a recommendation, WCAG 2.x ratios remain the reference.

How to check contrast

  1. Pick the text color and the background color (for text on photos, sample the lightest and darkest areas behind the text).
  2. Enter both into a contrast checker — many free web tools, browser developer tools, and design-tool plugins exist.
  3. Compare against the table above.
  4. Adjust value (lighter or darker), not just hue, until it passes.
Contrast check log
Element:        ______________
Text color:    #______   Background: #______
Size/weight:    ______ (normal or large?)
Ratio:          ____ : 1
Pass AA?        [ ] yes  [ ] no → adjustment: __________

Color vision deficiency

Color vision deficiencies (often called color blindness) affect a meaningful minority of people, more commonly men. Red–green deficiencies are the most common. Design implications:

  • Never use color as the only way to convey meaning. A chart where "profit" is green and "loss" is red needs labels, patterns or icons too. A form error needs text, not just a red border.
  • Test with a color-blindness simulator (available in many design tools, browser developer tools and plugins).
  • Prefer palettes that differ in lightness as well as hue.

Common accessible-color patterns

  • Dark text on light backgrounds for body copy.
  • If using white text, place it on sufficiently dark backgrounds — many mid-tone brand colors (bright orange, light green, sky blue) fail with white text at normal sizes.
  • Reserve bright, light accent colors for large shapes or button backgrounds with dark text.
  • Create an accessible variant of your brand color (slightly darker or lighter) for text use if the main color fails.

Worked example: an orange brand button

A brand's orange (a mid-lightness orange) with white "Book now" text at 16 px fails 4.5:1.

Options:

  1. Darken the orange for the button until white text passes — keeps white text, slightly changes the brand shade (define it as "orange-700" in the palette).
  2. Keep the orange and use near-black text — often passes easily and keeps the brand color.
  3. Make the text large and bold enough to count as large text and check against 3:1 — acceptable for short labels but not for body copy.

Document the decision in the brand's color guidance so everyone uses the accessible pairing.

Beyond contrast

  • Avoid flashing content: WCAG includes limits on flashing (no more than three flashes per second, with thresholds) because it can trigger seizures.
  • Don't put important text over animated backgrounds.
  • Provide captions for video and alt text for images.

Common mistakes

  • Checking contrast against the average color of a photo instead of its lightest/darkest area behind the text.
  • Assuming a brand color "must" be used for text even when it fails.
  • Using red/green alone for status.
  • Treating accessibility as optional polish at the end of a project.

2025–2026 context: why this is now a compliance topic

  • WCAG 2.2 is also an ISO standard. In October 2025, WCAG 2.2 was approved as ISO/IEC 40500:2025 — the same content as the W3C Recommendation — which makes it easier for public bodies and large buyers to require it in contracts.
  • European Accessibility Act. Since June 28, 2025, many consumer-facing digital products and services sold in the EU (including e-commerce) must meet accessibility requirements, typically assessed against the EN 301 549 standard, which references WCAG. Marketing teams that design web banners, landing pages and app screens for EU customers are directly affected.
  • WCAG 3 is still a draft and explores a different contrast method (APCA has been discussed in that work). Until it becomes a recommendation, use WCAG 2.2 ratios.

Beyond color contrast: WCAG 2.2 items designers own

| Criterion (AA) | What it means for designers | |---|---| | 1.4.1 Use of Color | Never rely on color alone — add labels, icons or patterns | | 1.4.3 Contrast (Minimum) | 4.5:1 normal text, 3:1 large text | | 1.4.11 Non-text Contrast | 3:1 for meaningful icons, input borders, chart lines, focus indicators | | 2.4.11 Focus Not Obscured (Minimum) — new in 2.2 | Sticky banners and chat bubbles must not fully hide the focused element | | 2.5.8 Target Size (Minimum) — new in 2.2 | Interactive targets at least 24 × 24 CSS px (with some exceptions such as spacing) |

Hands-on: test your brand colors in Figma

  1. Place text samples for every pairing you use (for example primary on white, white on primary, accent on dark).
  2. Use a contrast-checking plugin or the contrast information in your tool (or paste the two hex values into a web contrast checker).
  3. Record each result in the contrast log from this lesson.
  4. For failures, create an accessible variant by adjusting lightness (for example color/primary/700 for text use) and document which pairings are allowed.
  5. Check a color-vision-deficiency simulation (available in several Figma plugins and in browser developer tools) for charts and status colors.
PAIRINGS MATRIX (illustrative)
                 on White   on Warm white   on Near-black
Teal 500         3.9 ✗ text / ✓ large     3.7 ✗/✓       —
Teal 700         6.8 ✓      6.4 ✓           —
Amber 400        —          —               8.9 ✓
White            —          —               16.2 ✓
Rule: body text uses Teal 700 or Near-black only.

Values above are placeholders to show the format; measure your actual colors.

Summary

Use WCAG 2.2 AA ratios — 4.5:1 for normal text, 3:1 for large text and meaningful graphics — as your baseline, never rely on color alone, simulate color-vision deficiencies, and create accessible variants of brand colors where needed.

Video lecture: Accessible contrast and inclusive color use

Lecture coming soon · 11 chapters · about 9 minutes. Read the full transcript below.

  1. Accessible contrast
  2. Why it's a requirement
  3. WCAG 2.2 AA contrast
  4. How to check
  5. Color vision deficiency
  6. Worked example 1: an orange button
  7. Worked example 2: EU accessibility
  8. Watch me do it: testing brand colors
  9. WCAG 2.2 additions designers own
  10. Common mistakes
  11. Recap and try this now

Lecture transcript

Accessible contrast

Let's start with a design that looks gorgeous on your laptop. A bright orange button with white text that says Book now. Then someone views it on a phone in the afternoon sun. Or someone with low vision. Or someone with a common form of color blindness. The button text almost disappears. That's a contrast problem, and it's one of the most common design failures on the internet. In this lecture, you'll learn why accessibility is a design requirement, the WCAG two point two contrast ratios, how to check them, how to design for color vision deficiency, and the new rules that made this a compliance topic in twenty twenty-five. By the end, you'll know how to fix a failing brand color without losing the brand.

Why it's a requirement

Why is accessibility a design requirement, not an extra? First, people. A significant share of your audience has some visual impairment, color vision deficiency, or a situational limit like bright sunlight, a cracked screen or low brightness. Weak contrast excludes them. Second, performance. Designs that are easy to read work better for everyone. Third, law and reputation. Accessibility is increasingly a legal expectation for websites, apps and digital services in many markets. Think of it like ramps and curb cuts. They were designed for wheelchair users, but parents with strollers, travelers with suitcases and delivery workers use them every day. Accessible design helps far more people than you'd expect.

WCAG 2.2 AA contrast

Here are the numbers. The Web Content Accessibility Guidelines, WCAG, are the international standard, and WCAG two point two is current. It was also approved as an ISO standard in October twenty twenty-five. At level AA, normal text needs a contrast ratio of at least four point five to one against its background. Large text, roughly twenty-four pixels regular or about eighteen point seven pixels bold and above, needs three to one. Meaningful graphics and interface parts, like icons, input borders and chart lines, need three to one. Contrast ranges from one to one, meaning the same color, to twenty-one to one, black on white. These criteria were written for the web, but they're an excellent benchmark for social graphics, slides and ads too.

How to check

How do you check contrast? Pick the text color and the background color. For text on photos, sample the lightest and darkest areas behind the text, because a photo isn't one color. Put both values into a contrast checker. There are free web tools, browser developer tools and design-tool plugins. Compare the ratio to the thresholds. And when it fails, adjust value, meaning make one color lighter or darker. Changing hue alone rarely helps, because two different hues can have the same lightness. Keep a simple contrast log, so you don't re-test the same pairs every week.

Color vision deficiency

Now color vision deficiency. Often called color blindness, it affects a meaningful minority of people, more commonly men, and red-green deficiencies are the most common. The key rule, which is also a WCAG criterion: never use color as the only way to convey meaning. A chart where profit is green and loss is red needs labels, patterns or icons too. A form error needs text, not just a red border. A sale price needs a label or a strikethrough, not just a red number. Test with a color-blindness simulator, which you'll find in several design-tool plugins and in browser developer tools. And prefer palettes that differ in lightness as well as hue.

Worked example 1: an orange button

Worked example one, simple. A brand's signature orange button with white Book now text at sixteen pixels. The ratio fails four point five to one. We have three options. Option one, keep the exact orange as the button background and switch the text to near-black. That usually passes easily, and the brand color stays visible. Option two, create a darker, accessible variant of the orange for buttons with white text. Option three, make the text large and bold enough to count as large text and meet three to one, if it truly passes at that size. Most brands choose option one or two, and they document it, so nobody reintroduces the failing combination later.

Worked example 2: EU accessibility

Worked example two, a business scenario with illustrative details. An online store based in the UK sells to customers across the European Union. Since June twenty twenty-five, the European Accessibility Act means many e-commerce services must meet accessibility requirements, typically assessed against a European standard that references WCAG. The marketing team realizes their promotional banners and landing pages use pale gray text on white and a mint green button with white text. Both fail. They set up a pairings matrix of every brand color on every background, measure each ratio, and define accessible variants: a darker gray for body text and a deeper green for buttons. The banners look almost the same, but now everyone can read them, and the store is on the right side of the rules.

Watch me do it: testing brand colors

Watch me do it in Figma. I place text samples for every pairing we use: primary on white, white on primary, accent on dark and gray on warm white. I run a contrast plugin on each. Primary on white: three point nine to one. Fails for normal text, passes for large text. So I duplicate the primary and darken it until it passes four point five. That becomes primary seven hundred, for text use only. I record each result in the contrast log. Then I run a color vision deficiency simulation on our chart colors. Two series look almost identical, so I add direct labels and change one series to a dashed line. Finally, I write the rule into the style guide.

WCAG 2.2 additions designers own

WCAG two point two also added a couple of criteria that designers own, especially for web and app work. Focus not obscured: sticky headers, cookie banners and chat bubbles must not completely hide the element someone is navigating to with a keyboard. And target size minimum: clickable targets should be at least twenty-four by twenty-four CSS pixels, with some exceptions, like when there's enough spacing around them. Tiny close buttons and cramped icon rows are common failures. Plus non-text contrast: meaningful icons, input borders and focus indicators need three to one against their surroundings.

Common mistakes

Common mistakes. White text on mid-tone brand colors like bright orange, light green and sky blue. Pale gray body text because it looks elegant. Checking contrast on a perfect monitor but not on a phone in daylight. Using color alone for errors, statuses or chart series. Testing text on photos at one point, when the background varies. And fixing a failure once, then letting it creep back because nobody documented the rule. The fix for that last one is simple: a pairings matrix and a written rule, like body text uses primary seven hundred or near-black only.

Recap and try this now

Let's recap. Accessibility is a design requirement. Use WCAG two point two, now also ISO/IEC forty five hundred, colon twenty twenty-five: four point five to one for normal text, three to one for large text and meaningful graphics. Check contrast with a tool, sample photos carefully, and fix value. Never use color alone to convey meaning. Remember the European Accessibility Act and the new two point two criteria for web and app work. Try this now. Run your brand colors through a contrast checker in every text and background combination you use. Record the results in a contrast log or pairings matrix, and define an accessible variant for any failing pairing.

Key takeaways

  • WCAG 2.2 AA: 4.5:1 for normal text, 3:1 for large text and meaningful graphics; WCAG 2.2 is also ISO/IEC 40500:2025.
  • Check contrast with a tool, sample the lightest and darkest areas behind text on photos, and fix by adjusting value.
  • Never use color alone to convey meaning; test with color-vision-deficiency simulation.
  • The European Accessibility Act (from June 2025) makes accessibility a compliance issue for many EU-facing digital services.
  • Document accessible variants in a pairings matrix so failures don't return.

Try it

Run your brand colors through a contrast checker in every text/background combination you use. Record results in the contrast log and define an accessible variant for any failing pairing.