Reading Text: For reading purposes, find a high contrast pairing for most of your body copy (the heavy lifting).That's really all there is to it, but you could break this down into three even simpler chunks if you like: Your clients and audience will be impressed that your colors are chosen for thoughtful reasons - optimal readability - and you'll sail through QA testing with additional options should you need them. The last step is to keep a reference guide handy with your test results while adding notes to your style guide. 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. It’s good to identify some additional color combinations for attention-grabbing call-outs and other possible needs. "Ruby" (#C02F1D) is also a decent option. I go with "Darkest Alice" (#107896) for good combination of contrast and luminosity. The blues and reds have a higher success rate while the yellows and greens not so much. 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. I take a slightly different approach here. The next step is to find a good color option for buttons and links (the actions). #373D3F or "Raven" is my lightest gray within a AAA accessibility rating.
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. Examine body text contrastįirst, it's helpful to establish good body text values. Color Safe by Donielle Berg & Adrian Rappīrent Jackson's Colorable (Demo) 3.Colour Contrast Check by Jonathan Snook.Colorable (Demo) by Brent Jackson (*new favorite* h/t Luminosity Colour Contrast Ratio Analyser by Juicy Studio.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. From previous article, From Darkness to Light: Color Versatility Using Tints, Tones, and Shades. From previous article, Add Colors To Your Palette With Color Mixing.Įstablishing tints, tones, and shades. In this case, I’m using a pre-existing color palette and showing how I'm using tints, tones, and shades to help create more color contrast options. While you can use color contrast tools to help you establish a color palette, you can also use the tools to help find good options within an existing palette. Establish a color palette (with tints, tones, and shades) Also, check out Contrast Rebellion for an interesting look at the contrast problem. Check out W3C for a more thorough explanation. My goal here is to simply show that a little bit of effort can go a long way when it comes to selecting colors with optimal readability in mind. I should mention that I’m far from an accessibility expert. Thanks to some helpful color contrast accessibility tools, I think I have something that is working and wanted to share with others in the event that you find it helpful, too. I’ve been working on a process to help me ensure good color contrast and readability in my projects. Lists Unordered Lists Ordered Lists Other Lists HTML Block & Inline HTML Classes HTML Id HTML Iframes HTML JavaScript HTML File Paths HTML Head HTML Layout HTML Responsive HTML Computercode HTML Semantics HTML Style Guide HTML Entities HTML Symbols HTML Emojis HTML Charset HTML URL Encode HTML vs.When you create color palettes for your web design projects, are you testing the color combinations for contrast? If you're not, you might not be considering the eventual readability of the design and thus losing potential audience.
0 kommentar(er)
