Accessible CSS

New words in this topic, in plain English. Come back here whenever one feels fuzzy.

WCAG

Web Content Accessibility Guidelines: the international standard for accessible web pages, with levels A, AA and AAA.

Contrast ratio

A number from 1:1 to 21:1 that measures how different two colours look in brightness.

Relative luminance

How bright a colour looks to the human eye, from 0 (black) to 1 (white), used to calculate contrast.

Focus indicator

The visible ring or highlight that shows which element the keyboard is on.

`:focus-visible`

A pseudo-class that matches a focused element when the browser thinks a visible focus ring is helpful, such as during keyboard use.

Screen reader

Software that reads the page aloud or in braille for people who can't see the screen.

Visually hidden

Present for screen readers but not shown on screen.

Forced colours mode

A system setting that replaces a page's colours with a small palette chosen by the user.

System colours

Colour keywords like Canvas and CanvasText that follow the user's system palette.

`prefers-reduced-motion`

A media feature that tells CSS the user asked the system to reduce animation.

1. 1

   Find the lightest passing grey

   In the first example, add ["#777777", "#ffffff"] to the pairs. Predict whether it passes AA (it's one step lighter than #767676), then run it.

2. 2

   Break and fix the hidden text

   In the second example, change .visually-hidden to display: none. Predict what the console prints for display and what a screen reader would announce for the button now.

3. 3

   Emulate forced colours

   In the third example, delete the @media (forced-colors: active) block, then emulate forced colours in DevTools. Predict what happens to the unchecked box.

Errors are the best teachers. Make each change, read the error, guess what went wrong, then reveal the answer.

1. 1

   Contrast is how different the text colour is from its background, measured as a ratio from 1:1 (same colour) to 21:1 (black on white). The WCAG (Web Content Accessibility Guidelines) level AA asks for at least 4.5:1 for normal text and 3:1 for large text (at least 24px, or about 18.7px bold) and for non-text things people need to see: input borders, icons and focus indicators. Level AAA asks for 7:1 for normal text. DevTools shows the ratio in the colour picker, and the ratio is calculated from each colour's relative luminance (how bright it looks to the eye).

2. 2

   Focus styles show keyboard users where they are. Browsers draw a default focus ring; outline: none without a replacement makes the page unusable by keyboard. Use :focus-visible, which matches when the browser decides a ring is helpful (keyboard navigation, text inputs), not after every mouse click: :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }. Make the ring at least 2px thick with 3:1 contrast against what's next to it, and make sure sticky headers don't cover the focused element (scroll-padding-top helps).

3. 3

   Visually hidden text is text that screen readers announce but that isn't shown, for example "Close menu" on an icon-only button or "(opens in a new tab)" after a link. display: none and visibility: hidden hide content from everyone, including screen readers, so they are wrong here. The standard pattern shrinks the element to a 1px clipped box that is still in the accessibility tree: position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;. Many projects call this class .visually-hidden or .sr-only.

4. 4

   Forced colours mode (Windows High Contrast, now called Contrast themes) replaces your colours with a small palette the user chose, to make the screen readable for people with low vision or light sensitivity. In this mode browsers remove box-shadow and background images used as colours, and swap all colours for system colours like Canvas, CanvasText, LinkText, ButtonText and Highlight. Anything you drew only with a background colour or a shadow (a custom checkbox, a focus ring made with box-shadow) can vanish. Detect it with @media (forced-colors: active) and draw with borders and outlines, which survive. A neat trick: outline: 2px solid transparent is invisible normally but becomes visible in forced colours.

5. 5

   Motion can make some people dizzy or sick (vestibular disorders) and distracts others. Operating systems have a reduce motion setting, and CSS reads it with @media (prefers-reduced-motion: reduce). In that mode, remove large movements (parallax, sliding, zooming) and autoplaying animation, or replace them with a fade. Animations that pass information (a loading spinner) can stay but should be slower or simpler. Phase 10 covers the animation side.

6. 6

   A few more CSS habits matter. Size text in rem so it follows the user's font-size setting, and make sure the page works at 200% zoom and when text spacing is increased. Don't use colour alone to carry meaning (add an icon or text to red errors). Keep touch targets at least 24×24 CSS pixels (WCAG 2.2) and preferably 44×44. And remember that CSS can change visual order (order, grid-area, flex-direction: row-reverse) without changing the reading and tab order, which follows the HTML; keep them matching.

• ↔

  Higher contrast limits the palette (pale greys and pastel buttons are out), but it makes text readable for everyone, including people in bright sunlight.

• ↔

  Custom-styled controls look on-brand but must be rebuilt for focus, forced colours and states that native controls handle for free; prefer styling native controls (accent-color, appearance) where you can.

• I know the AA contrast ratios and can check them in DevTools.

• I style :focus-visible with a clear outline and never remove focus without a replacement.

• I can write the visually hidden pattern and explain why display: none is wrong.

• I can test and fix a page in forced colours mode.

• I reduce motion for users who prefer it.

• I size text in rem and keep visual order matching the HTML order.