Color and Contrast

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.

The contrast ratio

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:

function luminance(hex) {
  const [r, g, b] = [1, 3, 5].map((i) => {
    const c = parseInt(hex.slice(i, i + 2), 16) / 255;
    return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
  });
  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
}

function contrast(a, b) {
  const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x);
  return ((hi + 0.05) / (lo + 0.05)).toFixed(2);
}

console.log('price #9a9a9a on white:', contrast('#9a9a9a', '#ffffff'));
console.log('price #767676 on white:', contrast('#767676', '#ffffff'));
console.log('white on orange button:', contrast('#ffffff', '#f4a261'));
console.log('ink on orange button:  ', contrast('#1b1830', '#f4a261'));

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

The thresholds you need

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.

Ticketly’s fixes:

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

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

Don’t rely on colour alone

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.

On Ticketly that rules out:

• Links in body text that differ from surrounding text only by colour. Keep the underline (or ensure 3:1 against the body text plus another cue on hover and focus; the underline is far simpler).
• Errors shown only as a red border. Add a text message and an icon, connected as you did in Accessible Forms.
• Seat availability as green and red dots. Add a pattern or a label: “available”, “taken”.

What about APCA?

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.

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.

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.