Ensure there's enough contrast on the grid axis lines #1199
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
GeraldRequired Reviewers
Don't want to be involved in this pull request? Comment |
npm Snapshot: PublishedGood news!! We've packaged up the latest commit from this PR (f41a938) and published it to npm. You Example: yarn add @khanacademy/perseus@PR1199If you are working in Khan Academy's webapp, you can run: ./dev/tools/bump_perseus_version.sh -t PR1199 |
|
Size Change: +6.56 kB (+1%) Total Size: 833 kB
ℹ️ View Unchanged
|
SonicScrewdriver
force-pushed
the
mafs-embolden-the-grid
branch
from
8c377b5
to
8c32af9
Compare
SonicScrewdriver
changed the title
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #1199 +/- ##
==========================================
+ Coverage 68.45% 72.89% +4.43%
==========================================
Files 464 476 +12
Lines 99389 101116 +1727
Branches 7047 13091 +6044
==========================================
+ Hits 68040 73705 +5665
+ Misses 31234 27411 -3823
+ Partials 115 0 -115
... and 182 files with indirect coverage changes Continue to review full report in Codecov by Sentry.
|
… match more closely to the legacy positioning
SonicScrewdriver
force-pushed
the
mafs-embolden-the-grid
branch
from
56784db
to
83c86de
Compare
nishasy
approved these changes
May 7, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary:
During the playtest we discovered that the axis tick grid lines are far too light on several different devices. This PR updates the gridlines to use a close approximation to OffBlack32.
As a result of increasing the contrast of these grid lines, I felt the axis tick labels were getting a little harder to read. After checking with design, I've added a white stroke to these labels. This greatly increases readability of our graphs.
Example of old graph contrast:
Issue: LEMS-1925
Test plan:
Screenshots:
Contrast Comparison:
We don't pass the WCAG rules for text, but I don't think we actually have to for the grid lines. I will confirm with design that the new contrast level is sufficient. The previous grid line color is above with a ratio of 1.12. The contrast ratio after the changes is 1.84, and appears far more legible.
