I took the liberty to create alternate SVG graphs to the problem description’s ASCII art:
4 Likes
I’ve tried to bypass the inversion issue for light/dark mode by using a middle gray colour which survives inversion :
The contrast of the light gray text against the white background seems a bit low. What is the RGB value of the gray color?
It is one of the varients of a middle gray as I think a grey colour halfway between black and white is typically too close to black perceptually – hence the somewhat lighter grey which acts as a compromise between the original and its inverse.
I think I’m using CIECAM02 lightness at around 27% black which works out to RGB hex 0xBA.
Open to suggestions – happy to change.
27% black creates a contrast ratio of 1.94:1 against a white background, which is well below the recommended minimum contrast ratio of 3:1 for large text according to the Web Content Accessibility Guidelines (WCAG).
However, against the default dark background (used on Exercism, with color #282339), the contrast ratio is 6.35:1, which exceeds the WCAG minimum.
Since light text on dark backgrounds is generally harder to read, it’s reasonable to increase the blackness slightly to improve contrast. Bumping the blackness to around 34% (hex color #a8a8a8) results in contrast ratios of 2.37:1 against white and 4.73:1 against the dark background. The first one still falls short of WCAG standards; nevertheless, it should be a significant improvement.
No grey value, not even the optimal hex value of 767676 passes all WCAG in both original and inverted forms.
It seems we can make a protective bleed which is revealed under inversion.
It preserves the boundary and a maximum contrast. Any better now ?
1 Like
Four SVG files updated
Not really. The circles in white background image are clear, but in the black background it’s difficult to tell what is going on. So, why are some numbers in circles?
Edit: Apparently the circles represent the numbers added in each step.
Not sure what “optimal” means. 767676 results in contrast 3:32:1 for light text against dark background, and 4.54:1 for dark text against light background. Both pass the required 3:1. Passing all checks would be nice, but it’s not required.
Personally, i would just go with the guideline of 3:1 contrast of dark text against light background. This can be achieved with the hex color 949494, and also results in 4.98:1 contrast of light text against dark background (we do actually want this contrast to be as high as possible).
Another idea: Keep the protective bleed, but mark the new numbers differently. For instance, they can be underlined instead of circled.
1 Like
This seems clear enough. Nice work!