Guides Dark Mode fixes #51444
Guides Dark Mode fixes #51444
Conversation
@claudioduarte in rails#51415 - [x] Make alt, shorter SVG line for mobile, add responsive style - [x] Add side padding on footer (goes to edge on mobile, does not align on desktop) - [x] Shrink overall height of subCol so it doesn’t overlap footer @ivanjuric in rails#51398 - [x] Flip inverted dark modes on “more Ruby on Rails” nav bar DHH/Core: - [x] Darker dark mode (Github style) - [x] Double box on WIP call out (index.html. editable?) - [x] NavBar bottom issue clipping on some guides (pad the content?) - [x] Rounded corners/better appearance on select form elements in header - [x] Black border on bottom of interstitials
- [x] tightening up white space, adding Rails brand HR after intro - [x] base fontsize to 16px from 18px; - [x] fixing some darker dark mode issues in the last commit
To much contrastI highly recommend lowering the contrast of the text in dark mode. To much contrast in dark mode can cause halation and makes the content hard to read. I think that lowering the contrast will result in a more pleasant reading experience. The Accessible Perceptual Contrast Algorithm (APCA) has some proposed guidelines for maximum contrast for dark mode. Proposed changes based on the APCA guidelines: Text content should have a maximum contrast of Lc 90 and text >= 36px or bold text >= 24px (h1, h2, h3) should have a maximum contrast of Lc 75. Background of
Background of
Note that I'm not proposing any changes to the colors to the sample code. Red/Pink linksI'll preface this by pointing out that made the same changes to pass the WCAG standard. Readability should trump branding especially for documentation. I understand the desire to use red links for branding purposes and the red link color passes the WCAG standard (barely) but the links have a very low contrast compared to the rest of the text which is distracting and makes the content harder to read. The red links have a very low APCA score Lc 44.6 which is very far from the minimum recommendation of Lc 75 for body text. A random color that I picked The hover color for the chapter links should also be changed to something more readable. Other suggestionsChange the background of Lower the contrast and possibly change the color of the Chapters section to provide more "contrast" with the main content. APCA suggests a preferred contrast of Lc75 for primary navigation. For example the random blue I picked above ( From APCA Use Cases and Conformance Research
I think this screenshot contains most of the suggested changes
|
|
I'm fine with the background color and text color from the comment above, but we'll stick to the red for the links. If there's slight tweak to that red that would improve things, I'm happy to consider that too. But we're not introducing a new off-brand color for this. |
|
I'll create a PR for the background color and text color changes. For the links how about something like this:
I've taken the logo red and lightened it until it passes APCA Lc 75 which is the minimum for body text and preferred APCA Lc for primary navigation. Here's a link inside a paragraph with along with the text that has a lower contrast as suggested above.
|
|
Red in the sidebar is a no go. And the one in the main text looks rather sickly to me. But I'm good with background and the new white. |
There was a problem hiding this comment.
@jathayde did you mean to commit the css files here again? They were being generated to guides/output when we first introduced them.
There was a problem hiding this comment.
Sorry, they should not be here.
There was a problem hiding this comment.
Ok thanks, I've pushed a commit removing them: 0c1804d
* Guides feedback fixes @claudioduarte in rails#51415 - [x] Make alt, shorter SVG line for mobile, add responsive style - [x] Add side padding on footer (goes to edge on mobile, does not align on desktop) - [x] Shrink overall height of subCol so it doesn’t overlap footer @ivanjuric in rails#51398 - [x] Flip inverted dark modes on “more Ruby on Rails” nav bar DHH/Core: - [x] Darker dark mode (Github style) - [x] Double box on WIP call out (index.html. editable?) - [x] NavBar bottom issue clipping on some guides (pad the content?) - [x] Rounded corners/better appearance on select form elements in header - [x] Black border on bottom of interstitials * Additional UI cleanup - [x] tightening up white space, adding Rails brand HR after intro - [x] base fontsize to 16px from 18px; - [x] fixing some darker dark mode issues in the last commit * Lightening syntax highlight colors
Motivation / Background
This is a final (?) PR related to feedback on dark mode from various users and DHH/Core team members:
Referencing @claudioduarte in #51415
subCol/sidebar so it doesn’t overlap footerReferencing @ivanjuric in #51398
Notes from DHH & Core Team:
Additional information
Checklist
Before submitting the PR make sure the following are checked:
[Fix #issue-number]