Repository navigation
Composite translucent colors in the contrast check - #243
Merged
Merged
Conversation
The check took the nearest fill as solid paint and dropped its alpha, so an 8% amber tint on a near-black panel was judged as solid amber (1.72:1, a false error; the real pair is 13.45:1), and rgba(0,0,0,0) read as black. Translucent fills now blend over the fills behind them (or the white page), translucent text blends into that, and "transparent" is see-through.
This file contains hidden or 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
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.
canvas_evaluate's contrast check walked up from a text node to the nearest fill and used it as solid paint. It dropped the fill's alpha. A translucent fill was judged as its opaque color, so a common selected-state tint,rgba(245,158,11,0.08)over a near-black#14110cpanel, was judged as solid amber. Light text on it was reported at 1.72:1 as a WCAG error; the real contrast is 13.45:1. A fully transparent fill,rgba(0,0,0,0), was read as solid black. Translucent text colors were treated as opaque too.This showed up when the published viewer was imported and evaluated with framesmith itself: its selected breakpoint button got a false contrast error. App screens use tinted selected and hover fills on almost every list and toolbar, so the bug would misfire constantly on them.
The fix
rgbaor#RRGGBBAA) are blended over what is behind them. When no opaque fill is behind them, they are blended over the white page, which is what the renderer shows.transparent,noneand zero-alpha fills are see-through; the walk continues past them.hsl()or a named color, still stops the walk and skips the check, as before, so nothing is measured against the wrong background.rgba(255, 255, 255, 0.1) (composited: #1a1a1a). The autofix color is picked against the blended background.The fix cuts both ways. A faint white wash over black is now judged dark, so dark text on it fails, where it used to pass against "white".
The
canvas_evaluatedocstring anddocs/GUIDELINES.mdnow say contrast is measured as rendered.Testing
test-contrast-alpha.ts(fast tier, 10 checks): the viewer's tint, the same tint as#RRGGBBAA, a white wash over black, a fully transparent fill, translucent text, a tint with no opaque fill behind it, thetransparentkeyword, an unreadablehsl()fill, the composited color in the message, and an unchanged opaque pair. Seven of the checks failed on the old code.npm run test:fast: 82/82.npm run test:full: 119/119. Fifteen browser tests launch Puppeteer directly and needPUPPETEER_EXECUTABLE_PATH; they were run with it set.