Path for developers
Build accessible, consistent UI
The accessibility and system rules that matter most when you are the one writing the CSS.
Your progress
- LessonWCAG 2.2 AA contrastNormal text needs at least 4.5:1 contrast with its background. Large text and UI parts need 3:1.
- ToolContrast checkerTest any text and background pair against WCAG 2.2, see color-blind previews and get the nearest passing color.
- LessonVisible focusKeyboard users need a clear indicator of where they are on the page.
- LessonWCAG 2.2 target sizeClickable targets should be at least 24 by 24 CSS px (AA), and ideally 44 by 44.
- LessonAlt textDescribe meaningful images in alt text, and give decorative images an empty alt.
- LessonDon't rely on color aloneColor should never be the only way to show meaning.
- LessonMobile body text sizeUse at least 16px for body text and form inputs on mobile.
- LessonVisible labelsKeep form labels visible above fields. Placeholders are not labels.
- LessonHelpful error messagesA good error explains the problem and the fix, right next to the field.
- LessonVisibility of system statusAlways show people what is happening, ideally within a second.
- LessonConsistency & standardsThe same thing should look and behave the same way everywhere.
- ToolSpacing and radius tokensGenerate a 4pt or 8pt spacing scale and a radius set, with a live component preview.
- ToolType scale generatorBuild a modular type scale with line heights and optional fluid sizes. Export CSS, Tailwind or tokens.
- ToolAccessible palette generatorTurn one brand color into full 50 to 950 scales with contrast labels. Export CSS, Tailwind or tokens.
- GamePlay Level 6: Accessibility & TrustCheck what stuck.
Want experts to fix it for you?
Bad Design designs and builds B2B websites that turn visitors into leads.