Accessible colors code#
Accessible colors crack#

The core of the work of creating an accessible color palette starts with the designs. Accessible color palettes start with the designs But first, I think it’s worth dealing with accessible colors at the design level. We can leverage it to run difficult mathematical computations that would otherwise fly over many of our heads. But the good news is that we don’t need to do it ourselves or even have the same thorough understanding about how they’re calculated the way Stacie Arellano recently shared (which is a must read if you’re into the science of color accessibility). Ratios? Huh? Yeah, there’s some math involved here.

Text that is smaller than 24px should have a CCR of 7:1.

Text that is 24px and larger, or 19px and larger if bold, should have a CCR of 4.5:1.If a site needs to adhere to the enhanced guidelines for Level AAA, the requirements are a little higher: Text that is smaller than 24px should have a CCR of 4.5:1.Text that is 24px and larger, or 19px and larger if bold, should have a Color Contrast Ratio (CCR) of 3.0:1.My team adheres to WCAG’s Level AA guidelines by default.

Accessible colors crack#

It’s actually humbling to crack open the WebAIM Contrast Checker and run a site’s color combinations through it. There are different levels of acceptable criteria that the WCAG has defined as being accessible. But there’s more to high color contrasts than eyeballing a design. What we mean by “accessible color combinations”Ĭolor contrast is also one of those things we may think we have handled.

Accessible colors code#

Want to jump right to the code because you already understand everything there is to know about color accessibility? Here you go. I’ll walk you through how we put that together. There’s one specific strategy we use over at Oomph that lets a Sass function do all the heavy lifting for us. So let’s not only use better color combinations in our designs but find a way to make it easier for us to implement high contrasts.

It not only reduces eye strain in general, but is crucial for folks who deal with reduced vision. High color contrast is something that benefits everyone.

One of the easier things we can do is make sure the colors we use are easy on the eyes. We’re all looking for low-hanging fruit to make our sites and apps more accessible.