DESIGN.md and Accessibility: WCAG Contrast Checked by Default

DESIGN.md and Accessibility: WCAG Contrast Checked by Default

DESIGN.md and Accessibility: WCAG Contrast Checked by Default

DESIGN.md's linter checks WCAG contrast by default for every component's color pairing, reporting the exact ratio and whether it passes. Accessibility is built into the tooling rather than left as an optional audit, which addresses a real weakness of AI-generated interfaces.

Why is accessibility built into DESIGN.md?

AI agents tend to ignore contrast unless forced to consider it. Left alone, an agent will place light grey text on a white background because it looks clean in the abstract — producing UI that fails accessibility standards and is hard to read. By making WCAG checking a default behaviour of the linter, DESIGN.md forces the issue into every validation.

How does the contrast check work?

For each component that defines a text color over a background color, the linter computes the contrast ratio and reports whether it meets WCAG AA — the common standard of 4.5:1 for normal text. The result appears directly in the lint findings, with the exact ratio, so you are never guessing.

How should I design with contrast in mind?

Because the check is built in, think about contrast as you define component tokens rather than after. When you pair a text color with a background, you are making an accessibility decision — and the linter tells you immediately whether it holds up. This turns accessibility from a separate audit into a continuous part of defining your system.

The free DESIGN.md Cheat Sheet shows the WCAG check in the CLI output.Download Free — DESIGN.md Cheat Sheet

Why does this matter commercially?

Accessible interfaces are not just an ethical default — in many sectors they are a legal requirement. A design system that bakes WCAG checking into its tooling reduces the risk of shipping non-compliant UI, which is a real and growing liability. With DESIGN.md, accessible output becomes the path of least resistance.

FAQ

Which WCAG level does it check? AA contrast — 4.5:1 for normal text — reported per component pairing.

Can I reinforce accessibility in prose? Yes. A Do's and Don'ts section can cover touch targets, not relying on color alone, and legible line lengths — the parts judgement handles rather than a single ratio.

DESIGN.md: The Complete Guide covers accessibility as a first-class citizen, in the tooling and the prose.Get the Complete Guide