A magic number of 50+ results in WCAG 2.0 AA contrast or AAA Large Text contrast (example: gray-90 and red-40).A magic number of 40+ results in WCAG 2.0 AA Large Text contrast (example: gray-90 and indigo-warm-50v).Magic numbers have important contrast implications: We call the difference in grade between any two colors the magic number. Pure white is the equivalent of grade 0, and pure black is the equivalent of grade 100. Let’s look at the gray color family, in grades 5-90 (grade 0 is white):Ībove: Each color family has ten grades, from 5-90. USWDS helps teams choose accessible colors with a color grade system. The baseline AA contrast standard is 4.5:1 for most text and 3:1 for large text (19px+ bold or 24px+ normal text). Section 508, which aligns with WCAG 2.0 Level AA, sets a legal standard for the contrast level necessary between text and its background. 4.5% of 1.4 billion is around 60 million pageviews - when it comes to accessibility, thinking broadly and inclusively isn’t just a good idea, it’s our mission and responsibility. In Q2 of 2018, sites using USWDS topped 1.4 billion pageviews. Commonplace vision problems like short- and near-sightedness and astigmatism (among others) also affect how well folks perceive color and contrast.Īccessibility is not a special case. Color insensitivity can make it difficult to distinguish hues (red/green color blindness is the most common form), and some rare conditions prevent the perception of hue altogether. Approximately 0.5% of adult women and 8% of adult men (4.5% of the total population) have some kind of color insensitivity. Color and accessibilityĬolor is powerful but unreliable - its effects are neither consistent nor predictable across a population. This has important color contrast and accessibility implications that we’ll discuss later. We’ve regularized these grades across color families: a color of grade 50 in one color family should be the same level of lightness as a color of grade 50 in another color family.
USWDS uses a 100-point scale to communicate the grade, where 0 is pure white and 100 is pure black. Grade is a way to express how light or dark a color is. A system token color family is typically a conventional color name like red or blue-warm, and a theme token color family is a role-based name like primary. They contain a number of individual colors, distinguished by the brightness or saturation of each individual color. Throughout our documentation and guidance, we’ll use the terms color, color family, and grade, but what do we mean when we use them?Ĭolor is any specific swatch in our token palettes, like red-50, primary-base, or indigo-warm-60v.Ĭolor family is a group of colors that all have the same hue on a color wheel (See USWDS color wheels below). Sample contract language for 21st Century IDEA
0 kommentar(er)
