www.rcinet.ca (2020) | |
Color directs attention, but should not alter meaning. Start in black and white, scale text, then test effectiveness. Introduce color to support the message[1].
- Section 508 articulates with WCAG 2.0 Level AA, setting contrast at 4.5:1 for text less than 18px.
- Grade: 0 is pure white 100 is pure black
- Design for all: 4.5% of people differ in their perception of color difference, but not grades.
- Use USWDS color tokens when possible
Color Vision Deficiency (CVD) or colorblindness list of resources
Timberwolf +
Greens: Laurel, Fern, Hunter, Bruinswick
approximating
Grades 5 to 90
#ecf3ec to #1a1f1a
This palette goes between grades 10 and 70
approximating
Silver Sand + Midnight Green Eage Green
Blues: Alice, Pewter, Teal,
#e7f2f5 to #224a58
Grades 5 to 90 #e7f2f5 to #0f191c
References:
Method:
Take the starting and ending gradients from the digital.gov tokens to create a png image that approximates the standard USWDS palette
Use gradients between 10 and 70 to avoid having a display with hues that go to shades of gray
Take two hex gradient numbers and insert as start and end values, using only one # to indicate hex.
Export , Open in the generator
Next web page: Export, select image :: to save a png image to your computer
You can also copy a link to a palette that has the hex values and "standard" names for each color.
Last updated: 2021-FEB-01
No comments:
Post a Comment