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.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |