{"id":"l-a11y-4-1","courseId":"web-accessibility","lang":"en","kind":"lesson","summary":"Measure and fix text and interface contrast against WCAG 2.2 ratios, stop relying on colour alone, and understand why APCA isn’t part of the standard yet.","html":"

Low-contrast text is the most common accessibility failure on the web: WebAIM found it on 83.9% of the top million home pages in 2026. It is also the easiest to measure, because contrast is a number. Ticketly’s designers love pale grey on white and white on pastel orange. Maha, at 400% zoom with low vision, reads neither, and neither does anyone checking a ticket on a phone in the sun.

\n

The contrast ratio

\n

WCAG compares the relative luminance of two colours, a measure of perceived brightness from 0 (black) to 1 (white). The ratio runs from 1:1 (identical colours) to 21:1 (black on white). Here is the calculation, the same one every contrast checker runs:

\n
JavaScript
function luminance(hex) {\n  const [r, g, b] = [1, 3, 5].map((i) => {\n    const c = parseInt(hex.slice(i, i + 2), 16) / 255;\n    return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;\n  });\n  return 0.2126 * r + 0.7152 * g + 0.0722 * b;\n}\n\nfunction contrast(a, b) {\n  const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x);\n  return ((hi + 0.05) / (lo + 0.05)).toFixed(2);\n}\n\nconsole.log('price #9a9a9a on white:', contrast('#9a9a9a', '#ffffff'));\nconsole.log('price #767676 on white:', contrast('#767676', '#ffffff'));\nconsole.log('white on orange button:', contrast('#ffffff', '#f4a261'));\nconsole.log('ink on orange button:  ', contrast('#1b1830', '#f4a261'));
\n

The green channel dominates luminance, which is why white text on orange or yellow fails so badly even when it looks bright.

\n

The thresholds you need

\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
WhatLevel AACriterion
Normal text4.5:11.4.3 Contrast (Minimum)
Large text: at least 24px, or 18.66px bold3:11.4.3
Input borders, focus indicators, icons, chart lines needed to understand content3:11.4.11 Non-text Contrast
Text, enhanced7:11.4.6 (AAA)

Exemptions are narrow: logos, purely decorative elements and disabled controls. Hint text inside inputs, “secondary” grey captions, footer links and text over photos all count. For text over an image, add a solid or semi-opaque overlay behind the text and measure against the lightest part of the image it can sit on.

\n

Ticketly’s fixes:

\n
ticketly/styles.css
.price { color: #595959; }                 /* was #9a9a9a: 2.81:1 → 7.00:1 */\n.btn { background: #f4a261; color: #1b1830; } /* was white text: 2.06:1 → 8.35:1 */\ninput { border: 1px solid #77708f; }        /* was #ddd: 1.36:1 → 4.67:1 */
\n

The orange button keeps its brand colour; only the text colour changed. That is usually the cheapest fix.

\n\n

Don’t rely on colour alone

\n

WCAG 1.4.1 Use of Color (A) asks that colour is never the only way to convey information. About 1 in 12 men and 1 in 200 women have some form of colour vision deficiency, most often red-green.

\n

On Ticketly that rules out:

\n\n
\n Left: seat dots that differ only by colour look identical in greyscale. Right: available seats are outlined circles and taken seats are filled circles with a cross, still distinct without colour, with a legend in words.\n Colour only\n \n \n \n \n Which seats are free?\n \n Shape + label\n \n \n \n \n \n \n \n available\n \n taken\n
Same information, with and without colour
\n

What about APCA?

\n

You will meet the Accessible Perceptual Contrast Algorithm (APCA) in design tools. It models perception better than the WCAG 2 ratio: it accounts for font size and weight, and treats light-on-dark differently from dark-on-light, which matters for dark mode. It has been explored for WCAG 3, which is still a W3C working draft.

\n

APCA is not part of WCAG 2.2, and no law references it. An auditor will test your pages with the 4.5:1 and 3:1 ratios. Use APCA as an extra aid if your team likes it, especially for thin fonts and dark themes, but every colour pair must still pass the WCAG 2 ratio.

\n\n

Strong contrast helps people see Ticketly at its default size. The next lesson asks what happens when they change that size, and what happens when the page moves.

\n","toc":[{"id":"sec-1","text":"The contrast ratio","level":2},{"id":"sec-2","text":"The thresholds you need","level":2},{"id":"sec-3","text":"Don’t rely on colour alone","level":2},{"id":"sec-4","text":"What about APCA?","level":2}],"takeaways":["Body text needs a contrast ratio of at least 4.5:1 with its background; large text (24px, or 18.66px bold) needs 3:1.","Borders of inputs, focus indicators, icons and chart lines that people need to see require 3:1 against their surroundings (1.4.11 Non-text Contrast).","Colour can’t be the only way information is shown; pair it with text, an icon, an underline or a pattern.","APCA is a promising perceptual contrast model explored for WCAG 3, but WCAG 2.2 and the laws that cite it use the 4.5:1 and 3:1 ratios."],"further":[{"title":"W3C: Understanding 1.4.3 Contrast (Minimum)","url":"https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html"},{"title":"W3C: Understanding 1.4.11 Non-text Contrast","url":"https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html"},{"title":"W3C: Understanding 1.4.1 Use of Color","url":"https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html"},{"title":"WebAIM Contrast Checker","url":"https://webaim.org/resources/contrastchecker/"}],"quiz":[{"q":"

Ticketly’s prices are #767676 on white, a ratio of 4.54:1, set at 16px regular. Does that pass 1.4.3 Contrast (Minimum)?

","options":[{"text":"Yes, because 4.54 is at least 4.5","why":"Correct. The threshold is a minimum, not a rounded target, so 4.54:1 passes for normal-size text. It is the lightest grey that does on white."},{"text":"No, because 16px text needs 7:1","why":"7:1 is the AAA level (1.4.6 Contrast Enhanced). Level AA requires 4.5:1 for normal text."},{"text":"No, because grey text never passes","why":"Contrast depends on the ratio of luminance, not on hue or saturation. Dark enough greys pass easily."},{"text":"Only if the text is bold","why":"Bold text only lowers the requirement to 3:1 when it is at least 18.66px (14pt). At 16px, bold or not, the threshold is 4.5:1."}],"answer":0},{"q":"

A form field’s border is #dddddd on a white page (1.36:1). The label text has excellent contrast. What fails?

","options":[{"text":"Nothing, because borders are decorative","why":"The border is the only thing that shows where the field is. Visual information needed to identify a component must meet 3:1."},{"text":"1.4.3 Contrast (Minimum), because all colours on the page must reach 4.5:1","why":"1.4.3 applies to text. Non-text elements such as borders are covered by 1.4.11 at 3:1."},{"text":"1.4.11 Non-text Contrast, because the border identifying the input needs at least 3:1","why":"Correct. A border such as #77708f (4.67:1) makes the field’s boundary visible to people with low vision."}],"answer":2},{"q":"

Ticketly’s checkout marks invalid fields with a red border and nothing else. Who is most clearly failed by this design?

","options":[{"text":"Nobody, if the red has 3:1 contrast with the background","why":"Contrast helps people see the border, but not tell red from the normal border colour. Colour alone still carries the meaning."},{"text":"Users with red-green colour blindness, and screen reader users, who get no text at all","why":"Correct. About 1 in 12 men has some colour vision deficiency. Add an error message, an icon and aria-invalid, as in the forms lesson."},{"text":"Only keyboard users, who can’t see the border while typing","why":"Keyboard users see the border fine. The barrier is that colour is the only signal."}],"answer":1},{"q":"

A designer proposes checking every colour pair with APCA instead of the WCAG 2 contrast ratio. What should you tell them?

","options":[{"text":"Fine; APCA replaced the contrast ratio in WCAG 2.2","why":"WCAG 2.2 still uses the 4.5:1 and 3:1 ratios. APCA isn’t part of any published WCAG version."},{"text":"APCA is banned by the W3C, so it must not be used","why":"Nothing bans it. It is a research model you can use as an extra design aid."},{"text":"APCA only works for dark mode, so use it there","why":"APCA works for any polarity; that is one of its strengths. The issue is that conformance is still measured with the WCAG 2 ratio."},{"text":"Use APCA as an extra aid if you like, but colours must still meet the WCAG 2 ratios, because those are what WCAG 2.2 and the law use","why":"Correct. APCA has been explored for WCAG 3, which is still a draft. Audits today test the WCAG 2 contrast ratio."}],"answer":3}],"exercise":{"kind":"web","mode":"dom","starter":{"html":"
\n

Weekend pass

\n

SAR 320 for both nights

\n

Includes entry to the harbour lounge and a free drink token.

\n \n \n \n
","css":"body { background: #ffffff; }\n.pass { display: grid; gap: 8px; justify-items: start; max-width: 340px; }\n.pass h2 { margin: 0; }\n.pass p { margin: 0; }\n.price { color: #9a9a9a; }\n.note a { color: #1b1830; text-decoration: none; font-weight: 600; }\ninput { font: inherit; padding: 6px 8px; border: 1px solid #dddddd; border-radius: 6px; background: #ffffff; }\n.btn { font: inherit; padding: 8px 16px; border: 0; border-radius: 8px; background: #f4a261; color: #ffffff; }\n","js":""},"solution":{"html":"
\n

Weekend pass

\n

SAR 320 for both nights

\n

Includes entry to the harbour lounge and a free drink token.

\n \n \n \n
","css":"body { background: #ffffff; }\n.pass { display: grid; gap: 8px; justify-items: start; max-width: 340px; }\n.pass h2 { margin: 0; }\n.pass p { margin: 0; }\n.price { color: #595959; }\n.note a { color: #1b1830; text-decoration: underline; font-weight: 600; }\ninput { font: inherit; padding: 6px 8px; border: 1px solid #77708f; border-radius: 6px; background: #ffffff; }\n.btn { font: inherit; padding: 8px 16px; border: 0; border-radius: 8px; background: #f4a261; color: #1b1830; }\n","js":""},"checks":[{"id":"price","test":"const rgb = (c) => { const cv = document.createElement('canvas'); cv.width = cv.height = 1; const x = cv.getContext('2d'); x.fillStyle = '#fff'; x.fillRect(0, 0, 1, 1); x.fillStyle = c; x.fillRect(0, 0, 1, 1); return [...x.getImageData(0, 0, 1, 1).data].slice(0, 3); }; const lum = (c) => { const [r, g, b] = rgb(c).map((v) => { v /= 255; return v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4; }); return 0.2126 * r + 0.7152 * g + 0.0722 * b; }; const ratio = (a, b) => { const [hi, lo] = [lum(a), lum(b)].sort((m, n) => n - m); return (hi + 0.05) / (lo + 0.05); }; const bg = (el) => { while (el) { const c = getComputedStyle(el).backgroundColor; if (c && c !== 'transparent' && !/rgba\\(.*,\\s*0\\)$/.test(c)) return c; el = el.parentElement; } return '#ffffff'; }; const el = $('.price'); return ratio(getComputedStyle(el).color, bg(el)) >= 4.5;"},{"id":"button","test":"const rgb = (c) => { const cv = document.createElement('canvas'); cv.width = cv.height = 1; const x = cv.getContext('2d'); x.fillStyle = '#fff'; x.fillRect(0, 0, 1, 1); x.fillStyle = c; x.fillRect(0, 0, 1, 1); return [...x.getImageData(0, 0, 1, 1).data].slice(0, 3); }; const lum = (c) => { const [r, g, b] = rgb(c).map((v) => { v /= 255; return v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4; }); return 0.2126 * r + 0.7152 * g + 0.0722 * b; }; const ratio = (a, b) => { const [hi, lo] = [lum(a), lum(b)].sort((m, n) => n - m); return (hi + 0.05) / (lo + 0.05); }; const bg = (el) => { while (el) { const c = getComputedStyle(el).backgroundColor; if (c && c !== 'transparent' && !/rgba\\(.*,\\s*0\\)$/.test(c)) return c; el = el.parentElement; } return '#ffffff'; }; const el = $('.btn'); return ratio(getComputedStyle(el).color, bg(el)) >= 4.5;"},{"id":"input-border","test":"const rgb = (c) => { const cv = document.createElement('canvas'); cv.width = cv.height = 1; const x = cv.getContext('2d'); x.fillStyle = '#fff'; x.fillRect(0, 0, 1, 1); x.fillStyle = c; x.fillRect(0, 0, 1, 1); return [...x.getImageData(0, 0, 1, 1).data].slice(0, 3); }; const lum = (c) => { const [r, g, b] = rgb(c).map((v) => { v /= 255; return v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4; }); return 0.2126 * r + 0.7152 * g + 0.0722 * b; }; const ratio = (a, b) => { const [hi, lo] = [lum(a), lum(b)].sort((m, n) => n - m); return (hi + 0.05) / (lo + 0.05); }; const bg = (el) => { while (el) { const c = getComputedStyle(el).backgroundColor; if (c && c !== 'transparent' && !/rgba\\(.*,\\s*0\\)$/.test(c)) return c; el = el.parentElement; } return '#ffffff'; }; const el = $('input'); const cs = getComputedStyle(el); return parseFloat(cs.borderTopWidth) > 0 && cs.borderTopStyle !== 'none' && ratio(cs.borderTopColor, bg(el.parentElement)) >= 3;"},{"id":"link-cue","test":"const rgb = (c) => { const cv = document.createElement('canvas'); cv.width = cv.height = 1; const x = cv.getContext('2d'); x.fillStyle = '#fff'; x.fillRect(0, 0, 1, 1); x.fillStyle = c; x.fillRect(0, 0, 1, 1); return [...x.getImageData(0, 0, 1, 1).data].slice(0, 3); }; const lum = (c) => { const [r, g, b] = rgb(c).map((v) => { v /= 255; return v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4; }); return 0.2126 * r + 0.7152 * g + 0.0722 * b; }; const ratio = (a, b) => { const [hi, lo] = [lum(a), lum(b)].sort((m, n) => n - m); return (hi + 0.05) / (lo + 0.05); }; const bg = (el) => { while (el) { const c = getComputedStyle(el).backgroundColor; if (c && c !== 'transparent' && !/rgba\\(.*,\\s*0\\)$/.test(c)) return c; el = el.parentElement; } return '#ffffff'; }; const a = $('.note a'); const cs = getComputedStyle(a); const p = getComputedStyle(a.parentElement); const underlined = cs.textDecorationLine.includes('underline') || (parseFloat(cs.borderBottomWidth) > 0 && cs.borderBottomStyle !== 'none'); return underlined && ratio(cs.color, bg(a)) >= 4.5;"}],"title":"Fix the Weekend pass colours","prompt":"

Edit only the CSS so the Weekend pass card meets WCAG 2.2 AA:

\n\n

The checks compute real contrast ratios from your computed styles, so any passing colours are accepted.

\n","hints":["On white, any grey at #767676 or darker passes 4.5:1.","White on #f4a261 is only 2.06:1. Dark text on the same orange is well above 8:1.","A border of #77708f gives about 4.7:1 on white. For the link, text-decoration: underline is the simplest cue."],"explanation":"

Darkening the price to #595959 takes it from 2.81:1 to 7:1. The button keeps its brand orange and switches to dark text (8.35:1), which is usually cheaper than changing a brand colour. The input border moves from 1.36:1 to 4.67:1, so people with low vision can find the field (1.4.11). The link gets its underline back, so it is identifiable without relying on colour or weight differences (1.4.1). You can paste any of these pairs into the contrast function from the lesson to see the numbers.

\n","checkLabels":{"price":"Price text reaches 4.5:1 against its background","button":"Button text reaches 4.5:1 against the button colour","input-border":"The input border reaches 3:1 against the card background","link-cue":"The link has an underline (or bottom border) and 4.5:1 text contrast"}},"words":625,"readMinutes":3}