In design · the contrast checker works today
Find what’s wrong with an interface before your users do
Ideal User Interfaces is an AI reviewer in design: show it a screen and it marks the problems a careful designer would, contrast, clarity, errors and dark patterns, each tied to a published standard.
- 1 · Contrast Placeholder text 2.9:1 on white. WCAG asks 4.5:1.
- 2 · Error prevention Password rules appear only after a failed submit.
- 3 · Visibility of status The button gives no sign it is working.
How the review will work
- Show it a screenA screenshot or a link to a page.
- It checks against standardsWCAG 2.2 for accessibility, Nielsen’s ten heuristics for usability, and the dark patterns Australian consumer researchers have named.
- You get pinned findingsEach problem marked on the screen, with the rule it breaks and a fix.
Ideal User Interfaces is in design. The AI review is not available yet; the contrast checker works today. AI can miss things and invent things; a review is a starting point for a designer, not a replacement for testing with real people.
Colour contrast checker
Works todayTwo colours in, the WCAG 2.2 contrast ratio out, with a pass or fail for normal text, large text and interface parts.
Large text, 24 px
Normal text at 16 px reads like this sentence.
Enter a valid three- or six-digit hex colour in each field.
: 1
- Normal textneeds 4.5:1 (AA), 7:1 (AAA)
- Large textneeds 3:1 (AA), 4.5:1 (AAA)
- Icons and bordersneeds 3:1 (AA, 1.4.11)
Formula: W3C WCAG 2.2, relative luminance and contrast ratio, not rounded (4.499:1 fails 4.5:1).
Guides
- AI UI design tools compared: apps, prototypes and websitesChoose the output first: an editable design, a prototype, working application code or a published website. Then compare the plan and handover requirements.
- Colour contrast checker (WCAG 2.2)Check any two colours against WCAG 2.2: the ratio, and whether it passes for body text, large text and interface parts such as icons and input borders.
- Dark patterns: the designs that trick users, and what Australian research foundPre-ticked add-ons, fake countdown timers, cancellations hidden five screens deep. Australian research found most people have been caught by one.
- Design systems: components, patterns and a shared languageA design system lets a team stop redrawing the same button. It is the components, the rules for using them, and the shared names for both.
- How to write alt text: the W3C decision tree, with examplesThere is no single right length for alt text, because the right alt text depends on what the image does on the page. The W3C's decision tree provides a starting point for common image uses.
- Nielsen's 10 usability heuristics, with what each looks like on a screenTen rules of thumb, first published in 1990 and refined in 1994, that still catch most of what goes wrong on a screen.
- User testing: watching real people use your interfaceGive suitable participants realistic tasks, observe what happens, and use the evidence to improve the interface. A practical guide to planning a small study.
- Wireframes: what they are, what to leave out, and where AI fitsA wireframe is a page with the decoration taken away, so the argument can be about what goes where and why.