Pick saturated WCAG colors with ease

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!

Color - Animated shorts sizzling with knowledge

I came across this series with highly effective animated shorts about color. Every transition is a joy to see and the content magnificent.

And read about the subject over at CNN

Take a look at learn a lot!

Colorscope is a series on CNN that explores our perception of color and its use across cultures, one shade at a time. Inspired by our love for The Purple One we chose the last color on the spectrum, a marriage of opposites, a mixture between the hottest color and the coldest. http://www.cnn.com/2017/08/04/health/colorscope-purple/index.html For full credits visit buck.tv

We love CNN's Colorscope series, and were very excited to be asked to contribute. Here is everything you ever wanted to know about pink, but were afraid to ask. See the other colours here: www.cnn.com/colorscope ----- CREDITS Client: CNN Creative Producer: Sarah-Grace Mankarious Directed by Giant Ant Creative Direction: Jay Grandin Producer: Liam Hogan Storyboard: Conor Whelan, Jay Grandin, Marion Bordeyne, Eric Pautz Art Direction: Eric Pautz Illustration & Visual Development: Eric Pautz, Marion Bordeyne, Conor Whelan, Shawn Hight, Sitji Chou, Whitney Lam Animation Direction: Conor Whelan Animation: Conor Whelan, Shawn Hight, Chris Anderson, Henrique Barone, Matt James, Taylor Peters, Whitney Lam Compositing: Conor Whelan, Eric Pautz Sound Design: Bryan Stone

Short history of the colour black made for CNN as part of their Colorscope series. Direction, Design and Animation by Matt Abbiss Produced by Sarah-Grace Mankarious Animation by Marta Reis Andrade Sound Design by Bryan Stone Music by Giacomo Smith 2017

YELLOW is part of the Colorscope series by CNN. "They call it mellow yellow". The short documentaries about different colours shows us on this episode how the colour yellow makes us happy, is on the most visibles hues and it's relation with science and religion. Created by Sebastián Baptista Producer: Sarah-Grace Mankarious Writer and Narrator: Dr. James Fox Music: Giacomo Smith Sound Design: Bryan Stone Special thanks to: Andy, Pini & Javi

The Dark Truth Behind White Working with CNN I directed and animated an episode of Colorscope, a series exploring the secret truths behind colour. Client - CNN Production - Sarah-Grace Mankarious Direction / Animation - Jocie Juritz Writing / Narration - Dr James Fox http://edition.cnn.com/specials/arts/colorscope-series http://www.jociejuritz.co.uk/CNN-white

"Green, the mixture of blue and yellow, can be seen everywhere and in countless shades. In fact, the human eye sees green better than any color in the spectrum. But why is that?" I teamed up (once again) with the amazing Rafael Mayani for this short piece commissioned by CNN International to explain the so-familiar colour, green. Producer: Sarah-Grace Mankarious Written and Narrated by Dr. James Fox Animation: Jorge R. Canedo E. Design: Rafael Mayani Music: Giacomo Smith Sound Design: Bryan Stone

"Blue is the world's favourite colour" We worked with CNN and Dr. James Fox to produce a film for their Colour Scope series. See the website here: http://edition.cnn.com/interactive/2016/12/specials/colorscope-blue/ Produced by Sarah-Grace Mankarious & Moth Direction & Design by Moth Animation by Moth, Joe Bichard, Jennifer Zheng, Aaron Lampert, Carlos De Faria, Stephen McNally, Ester Rossi Sound Design by David Kamp Music by Giacomo Smith Client - CNN Production Year - 2016

The 8th episode of CNN Colorscope explores the allure of Gold; worshiped by pharoahs, Aztecs and millennials alike. See the series on cnn.com/colorscope Producer: Sarah-Grace Mankarious Writer and Narrator: Dr. James Fox Director and Animator: Tim Booth Music: Giacomo Smith Sound Design: Bryan Stone

Colorscope is an award-winning series exploring our perception of color and its use across cultures one shade at a time. Orange is the colour of sunsets, budget airlines, traffic cones and protestants, but it can also be toxic…! http://edition.cnn.com/2017/12/06/health/colorscope-orange/index.html Credits Writer and Narrator: Dr. James Fox Producer: Sarah-Grace Mankarious Production Company: Nexus Studios Director: Emmanuelle Walker Producer: Greet Kallikorm Production Assistant: Islay Leefe-Griffiths Executive Producer: Chris O’Reilly, Charlotte Bavasso Production Company: Nexus Studios Studio Lead: Elliott Kajdan Art Direction: Emmanuelle Walker Animators: Claudio Salas, Emanuele Romano, Pierre Rutz, Emmanuelle Walker Motion Graphics: Elliott Kajdan, Abel Kohen, Emmanuelle Walker Sound Design: John Black Music: Giacomo Smith

I worked with CNN on their second film for the Colour Scope series. The bar was set super high after the amazing job Moth Studio made on the first piece. Direction and Design by Abel Reverter Produced by Sarah-Grace Mankarious Animation by Abel Reverter Music by Giacomo Smith Sounds Design by Bryan Stone VO by Dr. James Fox Special thanks to the amazing Katie Menzies, Fabian Friedrich, David Elósegui and everyone that helped giving advice during the process at Pamplona 89. All the episodes at cnn.com/colorscope Client - CNN 2017

https://vimeo.com/channels/colorscope