better color choice

WCAG color palette to pick color with good color ratio.

English

Universal Design

In web design, ensuring accessibility is crucial, especially when it comes to color choices. I've developed a simple tool featuring two gradient palettes to simplify color selection while adhering to Web Content Accessibility Guidelines (WCAG).

For starters, consider your background color or text color—whether it's white or black. Then, use the palette to pick saturated accent colors to meet WCAG standards.

There are a lot more tones out there, these are the most saturated rich colors.

For colors on white, elements like large headings or logos, opt for colors with a contrast ratio of at least 3:1, these are found above the first line in the palette. For smaller text and finer details, select colors below the next line, ensuring a contrast ratio of 4.5:1.

To future-proof your design and ensure accessibility, aim for colors below the third line in the palette, offering a contrast ratio of 7:1.

For colors on black, we. often go for colors closer to 7:1. On dark backgrounds colors with contrast ratio of 3:1 can be a bit to dark, but there’s the limit.

Download the Palette and find accent color to use for screen. If you need to keep contrast between two different colors, use a tool like colorcontrast.cc for precise control over the ratio.

Design with accessibility in mind. Good luck!

Norsk

Universell utforming

Innen webdesign er det avgjørende å sikre tilgjengelighet, spesielt når det gjelder fargevalg. Jeg har utviklet et enkelt verktøy, to gradientpaletter for å forenkle fargevalget samtidig som man følger retningslinjene for tilgjengelighet på nett (WCAG).

For å komme i gang, ta hensyn til bakgrunnsfargen eller tekstfargen din - enten den er hvit eller svart. Deretter bruker du paletten til å velge mettede aksentfarger som oppfyller WCAG-standarden.

Det finnes mange flere fargetoner der ute, men dette er de mest mettede tonene.

Farger på hvit med innholdselementer som store overskrifter eller logoer, velger en farger med et kontrastforhold på minst 3:1, disse finner du over den første linjen i paletten. For mindre tekst og tynne detaljer, velg farger under den neste linjen for å sikre et kontrastforhold på 4.5:1.

For å fremtidssikre designet ditt bør du velge farger under den tredje linjen i paletten, som gir et kontrastforhold på 7:1.

Farger på svart bakgrunn begynner man nok med en større kontrast i utgangspunktet nærmere 7:1. Kontrast på svart er 3:1 nok i mørkeste laget, men opp til deg, der går i hvert fall grensen.

Last ned paletten og finn aksentfarger til å bruke på skjerm. Hvis du trenger kontrasten mellom to forskjellige farger og som ikke svart eller hvit, bruk et verktøy som colorcontrast.cc for mer nøyaktig kontroll over kontrastforholdet.

Design med tilgjengelighet i tankene. Lykke til!