Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add AAA magic number and fix reference to WCAG #656

Merged
merged 2 commits into from Oct 1, 2018
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
11 changes: 3 additions & 8 deletions pages/style/color/overview.md
Expand Up @@ -117,18 +117,13 @@ USWDS helps teams choose accessible colors with a color grade system. Let鈥檚 lo

### Magic number
We call the difference in grade between any two colors the _magic number_. Magic numbers have important contrast implications:
- **A magic number of `40`** or higher achieves Section 508 AA Large contrast (For example: between `gray 90` and `indigo warm 50v`).
- **A magic number of `50`** or higher achieves Section 508 AA contrast (For example: between `gray 90` and `red 40`).
- **A magic number of `40`** or higher achieves WCAG 2.0 AA Large Text contrast (example: between `gray 90` and `indigo warm 50v`).
- **A magic number of `50`** or higher achieves WCAG 2.0 AA contrast or AAA Large Text contrast(example: between `gray 90` and `red 40`).
- **A magic number of `70`** or higher achieves WCAG 2.0 AAA contrast (example: between `gray 10` and `red 80`).
- **Colors of grade `50`** achieve Section 508 AA contrast against both pure white (grade `0`) and pure black (grade `100`).

Use USWDS magic numbers to choose accessible color combinations from any palette and color family.

<!-- The difference in grades between two colors is meaningful. Use this difference to calculate contrast. Across all colors and color familes:

**Grade differences (deltas) of 50** between any two colors assure that the contrast between the two colors conforms to WCAG 2.0 AA. (For example: between `gray 90` and `red 40`.)

**Grade differences (deltas) of 40** between any two colors assure that the contrast between the two colors conforms to WCAG 2.0 AA Large. (For example: between `gray 90` and `indigo warm 50v`.) -->

#### Accessible color combination examples

{:.measure-5}
Expand Down