Contrastraster

Een ontwerpsysteem is geen lijst kleuren, het is een lijst combinaties — en de vraag die werkelijk opkomt is welke van deze op welke mag. Dat paar voor paar nakijken betekent n² bezoekjes aan een contrastchecker. Bij een palet van acht zijn dat vierenzestig controles, en daarom doet niemand het, en daarom gaan ontwerpsystemen de deur uit met combinaties die niemand ooit heeft getest. Dit is een contrastchecker voor paletten die ze allemaal tegelijk doet — een WCAG-kleurmatrix voor de hele set. Plak je palet en elke kleur wordt als tekst getoetst aan elke kleur als achtergrond, met de contrastverhouding en het WCAG-cijfer in elke cel. Groen haalt het niveau dat je koos, amber haalt alleen de lagere lat voor grote tekst, rood zakt. Plak het in de vorm die je toch al hebt. Hex, rgb(), hsl() of CSS-kleurnamen, gescheiden door regeleinden, komma's of spaties, met de syntaxis van custom properties er nog aan als je dat gekopieerd hebt — het leest het allemaal en vertelt je wat het niet kon lezen. Het raster is ook het ding dat je wilt bewaren. Het is gemaakt om zo als schermafbeelding in een ontwerpspecificatie of een pull request te belanden, want de controle gebeurt één keer en het plaatje wordt een jaar lang gebruikt. Alles draait in je browser.