From b526f11f9d138cedcad043b50e6a209316c57432 Mon Sep 17 00:00:00 2001 From: Lloyd Kupchanko Date: Sat, 30 Mar 2024 23:45:56 -0600 Subject: [PATCH] Reduce contrast of text and inline code elements. To much contrast in dark mode can cause halation and makes text hard to read. The Accessible Perceptual Contrast Algorithm (APCA)[1] has preliminary guidelines ([2]) for maximum contrast in dark mode. The changes introduced in this PR ensure that the contrast for text content does not exceed Lc 90 and does not exceed Lc 75 for large text. The background color for inline code elements was also darkened so that there is less contrast with the surrounding text. 1. https://github.com/Myndex 2. https://github.com/Myndex/SAPC-APCA/discussions/106 --- guides/assets/images/hr_rails_white.svg | 2 +- .../assets/images/hr_rails_white_mobile.svg | 2 +- .../images/icon_book-close-bookmark-1-wht.svg | 2 +- guides/assets/stylesrc/_dark.scss | 28 ++++++++++--------- guides/assets/stylesrc/style.scss | 9 ++++++ 5 files changed, 27 insertions(+), 16 deletions(-) diff --git a/guides/assets/images/hr_rails_white.svg b/guides/assets/images/hr_rails_white.svg index 48b2acd6b0..7c612834a6 100644 --- a/guides/assets/images/hr_rails_white.svg +++ b/guides/assets/images/hr_rails_white.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/guides/assets/images/hr_rails_white_mobile.svg b/guides/assets/images/hr_rails_white_mobile.svg index 7efd705d5c..66e79adc9d 100644 --- a/guides/assets/images/hr_rails_white_mobile.svg +++ b/guides/assets/images/hr_rails_white_mobile.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/guides/assets/images/icon_book-close-bookmark-1-wht.svg b/guides/assets/images/icon_book-close-bookmark-1-wht.svg index 209a9a9942..c4876d29d7 100644 --- a/guides/assets/images/icon_book-close-bookmark-1-wht.svg +++ b/guides/assets/images/icon_book-close-bookmark-1-wht.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/guides/assets/stylesrc/_dark.scss b/guides/assets/stylesrc/_dark.scss index 9ae64b8082..a526dae0d3 100644 --- a/guides/assets/stylesrc/_dark.scss +++ b/guides/assets/stylesrc/_dark.scss @@ -9,7 +9,7 @@ body.guide { background-color: $gray-1000; - color: #fff; + color: $text-on-darker-bg; &::-webkit-scrollbar { width: 12px; @@ -27,8 +27,9 @@ border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); } - h1 { - color: #fff; + + h1, h2, h3 { + color: $large-text-on-darker-bg; } a { @@ -44,10 +45,10 @@ } // &:visited } // a - h2 a { + h2 a, h3 a { &:link, &:visited { - color: #fff; + color: inherit; } } // h2 a @@ -55,6 +56,7 @@ th { background-color: $gray-900; border-bottom: 2px solid $gray-700; + color: $text-on-darker-bg; } // th tr { @@ -64,11 +66,11 @@ } } // table - h3, h4, h5, h6 { + h4, h5, h6 { a, a:link, a:visited { - color: #fff; + color: inherit; } // a, a:link, a:visited } // h3 @@ -86,8 +88,8 @@ } // pre, code p code, ul code, li code { - background-color: $gray-650; - color: #fff; + background-color: $gray-850; + color: $text-on-darker-bg; } td code { @@ -137,7 +139,7 @@ a, a:link, a:visited { - color: $gray-100; + color: $text-on-darker-bg; } // a a#home_nav { @@ -151,14 +153,14 @@ #guides { background: $gray-800; - color: $gray-100; + color: $text-on-dark-bg; .guides-section { dd { a, a:link, a:visited { - color: $gray-100; + color: $text-on-dark-bg; } // a a:hover, @@ -204,7 +206,7 @@ a, a:link, a:visited { - color: $gray-100; + color: inherit; } a:hover, diff --git a/guides/assets/stylesrc/style.scss b/guides/assets/stylesrc/style.scss index 241e28634d..73face4b4a 100644 --- a/guides/assets/stylesrc/style.scss +++ b/guides/assets/stylesrc/style.scss @@ -51,6 +51,7 @@ $gray-600: #666666; $gray-650: #505050; $gray-700: #3A3939; $gray-800: #343434; +$gray-850: #2E2E2E; $gray-900: #292929; $gray-1000: #181818; @@ -70,6 +71,14 @@ $stop-dark: rgba($stop, 0.5); $stop-bkgnd: rgba($stop, 15%); $stop-bkgnd-dark: rgba($stop, 5%); +// APCA has different rules if the background is darker than #333333. +// The variables with darker in them are intended for those cases. +// Large text is text that is > 24px +// See https://github.com/Myndex/SAPC-APCA/discussions/106 +$text-on-dark-bg: #EDEDED; // APCA Lc 90 on gray-800 +$text-on-darker-bg: #E5E5E5; // APCA Lc -89.9 on gray-1000, Lc -87.4 on gray-900 +$large-text-on-darker-bg: #CCCCCC; // APCA Lc -74.6 on gray-1000, Lc -72.0 on gray-900 + // ---------------------------------------------------------------------------- // Fonts // These are the same fonts that are used on the marcom site, and they are