Accessibility

Every foreground and background pair that carries text is computed to its exact contrast ratio and written into a table beside the color definitions. The threshold is 4.5 to 1 for normal text and 3 to 1 for large text and meaningful non-text graphics. A pair that fails is changed before it ships, not recorded as a known issue.

Measuring instead of estimating catches things that eyes do not. On one build an accent color intended for small labels measured 3.2 to 1 against its background — legal for a heading, illegal for the eleven-pixel text it was actually being used for. Darkening it far enough to carry small text dropped a different pair below threshold, which meant the palette needed two accent values rather than one. No amount of looking at it would have produced that conclusion.

Accent colors do not carry body text. This comes up in every build, because the accent is the color the brand is proudest of and small print is where designers reach for it. It fails the measurement essentially every time.

Focus states exist on every interactive control, not most of them. The visible focus ring is defined once, centrally, so that anything a keyboard can reach inherits it, which is what prevents the common outcome where buttons have a focus style and links do not.

Text over a photograph is measured from composited pixels instead of from the color value in the file, because what a reader sees is the result of the image, any gradient over it, and the text on top.

Keyboard navigation is tested by navigating with a keyboard: tab order follows reading order, nothing is reachable that cannot be operated, and no control traps focus.

Reduced-motion preferences are honored at the base layer rather than per component, so a preference expressed by the operating system suppresses animation everywhere instead of everywhere someone remembered. Motion that conveys meaning is given a non-motion equivalent.

Semantic structure carries the page. Headings descend without skipping levels, landmarks are labeled, lists are marked up as lists, and interactive controls are the elements that already behave correctly rather than divs taught to imitate them. Most of what assistive technology needs is obtained by using the right element, and most of what breaks it comes from not doing so.