From previous article, Add Colors To Your Palette With Color Mixing.Įstablishing tints, tones, and shades. Find one that works for you and use it to test background and foreground color combinations. Here are some options: There are plenty of good color contrast testing tools available on the web.įrom previous article, From Darkness to Light: Color Versatility Using Tints, Tones, and Shades.Colorable (Demo) by Brent Jackson (*new favorite* h/t Luminosity Colour Contrast Ratio Analyser by Juicy Studio.Colour Contrast Check by Jonathan Snook.Color Safe by Donielle Berg & Adrian Rappīrent Jackson's Colorable (Demo) 3.Examine body text contrastįirst, it's helpful to establish good body text values. Testing a neutral color palette as text on a white background (from previous article: Shades of Gray - Yes, Really.) The AAA rating ensures optimal readability while some brightness allows for softness in the text. Note that the color names are custom names that I've assigned to the colors (from previous article, Giving Colors More Colorful Names.) I usually start with a neutral color palette and aim for the lightest gray with a WCAG AAA (Section 508 compliant) rating. #373D3F or "Raven" is my lightest gray within a AAA accessibility rating. The next step is to find a good color option for buttons and links (the actions). I take a slightly different approach here. Instead of going for AAA, I’m looking for AA (a reasonable standard to strive for) so that I can get a brighter color to contrast from the static text and draw attention to important links. For these purposes, I'm testing white (#FFFFFF) in combination with various colors. The blues and reds have a higher success rate while the yellows and greens not so much. I go with "Darkest Alice" (#107896) for good combination of contrast and luminosity. "Ruby" (#C02F1D) is also a decent option. It’s good to identify some additional color combinations for attention-grabbing call-outs and other possible needs. My base example with dark gray "Raven" text and a bright "Darkest Alice" blue for links and buttons.Įxample with darks on a lighter background.Įxample with lights on a darker background. The last step is to keep a reference guide handy with your test results while adding notes to your style guide.
0 Comments
Leave a Reply. |