From c58f8cae339e31f4ef2ac1e2d7ae990a00550ecd Mon Sep 17 00:00:00 2001 From: Maya Benari Date: Fri, 28 Sep 2018 14:28:25 -0700 Subject: [PATCH 1/2] Add AAA magic number and fix reference to WCAG --- pages/style/color/overview.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/pages/style/color/overview.md b/pages/style/color/overview.md index eecda61ef..971eb5469 100644 --- a/pages/style/color/overview.md +++ b/pages/style/color/overview.md @@ -117,8 +117,9 @@ USWDS helps teams choose accessible colors with a color grade system. Let’s 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 (For 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(For example: between `gray 90` and `red 40`). +- **A magic number of `70`** or higher achieves WCAG 2.0 AAA contrast (For 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. From 8dded63163b9e40c505bd0cdaac098ab48392e9b Mon Sep 17 00:00:00 2001 From: Maya Benari Date: Fri, 28 Sep 2018 16:02:07 -0700 Subject: [PATCH 2/2] Change for example to example --- pages/style/color/overview.md | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/pages/style/color/overview.md b/pages/style/color/overview.md index 971eb5469..ffa22becb 100644 --- a/pages/style/color/overview.md +++ b/pages/style/color/overview.md @@ -117,19 +117,13 @@ USWDS helps teams choose accessible colors with a color grade system. Let’s 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 WCAG 2.0 AA Large Text contrast (For 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(For example: between `gray 90` and `red 40`). -- **A magic number of `70`** or higher achieves WCAG 2.0 AAA contrast (For example: between `gray 10` and `red 80`). +- **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. - - #### Accessible color combination examples {:.measure-5}