Preview image. Unlock full-res
Dark navy guideline page with a dense grid of coloured circles labelled AA, AAA or NA to show which colour combinations meet accessibility standards.
Summary
A navy page documenting accessible colour combinations as a large grid of circles, each tagged AA, AAA or NA to signal its compliance level.
Visual description
Deep navy background. Top-left: a "Our colour" pill, the heading "Combinations", and two short paragraphs explaining that swatches marked AA or AAA pass accessibility standards while NA ones are non-compliant but usable in marketing. The lower half is a tight three-row grid of roughly fourteen circles per row, spanning coral, soft white, orange, neon, teal, mint and khaki, each holding a small "AA", "AAA" or "NA" label that reflects the text-on-background pairing.
Key takeaway
Encoding an entire contrast matrix as a wall of labelled circles makes a complex accessibility rule scannable at a glance. The AA / AAA / NA shorthand printed inside each swatch removes any need for a separate legend.
Reuse notes
Excellent reference for the accessibility section of a multi-colour brand or product guideline. The circle-grid scales to large palettes where a written table would be unreadable. Reads best on a dark field so every swatch pops.
From this deck: Monzo colour combinations grid
View deck
