Adjust ratio for opacity #222
There are no files selected for viewing
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,15 +1,30 @@ | ||
| <script lang="ts"> | ||
| import { contrast, mix } from 'colorjs.io/fn'; | ||
|
|
||
| import ColorIssues from '$lib/components/ratio/ColorIssues.svelte'; | ||
| import Result from '$lib/components/ratio/Result.svelte'; | ||
| import ExternalLink from '$lib/components/util/ExternalLink.svelte'; | ||
| import Icon from '$lib/components/util/Icon.svelte'; | ||
| import { RATIOS } from '$lib/constants'; | ||
| import { bg, fg } from '$lib/stores'; | ||
|
|
||
| let fgPremultiplied = $derived.by(() => { | ||
| if ($fg.alpha === 1 || $bg.alpha !== 1) return $fg; | ||
| return mix($bg, $fg, $fg.alpha, { | ||
| space: 'srgb', | ||
| premultiplied: false, | ||
| }); | ||
| }); | ||
| let ratio = $derived(contrast($bg, fgPremultiplied, 'WCAG21')); | ||
| let displayRatio = $derived(Math.round((ratio + Number.EPSILON) * 100) / 100); | ||
| let pass = $derived(ratio >= RATIOS.AA.Normal); | ||
| let alphaWarning = $derived.by(() => { | ||
| if ($bg.alpha !== 1) | ||
| return 'Alpha is not considered when the background is not opaque.'; | ||
| if ($fg.alpha !== 1) | ||
| return 'This ratio is our best estimate with transparency.'; | ||
jamesnw marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| return null; | ||
| }); | ||
| </script> | ||
|
|
||
| <aside data-layout="results"> | ||
|
|
@@ -20,6 +35,13 @@ | |
| <span class="sr-only">The contrast ratio is</span> | ||
|
There was a problem hiding this comment. I know it's not new here, but I don't think this is useful screen reader context. The heading directly before this says 'current ratio' already. There was a problem hiding this comment. Agreed. Removed in 1044fb1. On the topic, I wonder if (in another story) we should edit the click-to-copy buttons to say what exactly they are copying? There was a problem hiding this comment. Yeah, I don't know the best solution on those - but no harm oping an issue to explore it. |
||
| <span class="result-ratio-number">{displayRatio}:1</span> | ||
| </h3> | ||
| {#if alphaWarning} | ||
| <div class="result-warning-info"> | ||
| <p data-color-info="warning" class="result-warning"> | ||
| <Icon name="warning" />{alphaWarning} | ||
| </p> | ||
| </div> | ||
| {/if} | ||
|
|
||
| <p class="result-intro"> | ||
| In WCAG 2, contrast is a measure of the difference in perceived brightness | ||
|
|
@@ -73,7 +95,9 @@ | |
| @use 'config'; | ||
|
|
||
| [data-layout='results'] { | ||
| background: linear-gradient(90deg, var(--bgcolor), var(--bgcolor)), | ||
| url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><rect fill="%23e8e8e8" width="30" height="30"/><rect x="30" y="30" width="30" height="30" fill="%23e8e8e8"/></svg>'); | ||
| background-size: 30px 30px; | ||
| color: var(--fgcolor); | ||
| display: grid; | ||
| gap: var(--result-layout-gap, var(--shim)); | ||
|
|
@@ -96,26 +120,34 @@ | |
| } | ||
|
|
||
| .contrast-info { | ||
| column-gap: var(--shim); | ||
| display: grid; | ||
| grid-area: contrastinfo; | ||
| // fixed row height to prevent layout shift when warning appears | ||
| grid-template: | ||
| 'heading heading' min-content | ||
| 'number warning' var(--ratio-warning-height) / auto 1fr; | ||
| margin-block-end: var(--contrast-info-block-end, var(--gutter)); | ||
|
|
||
| @include config.between('sm-column-break', 'lg-page-break') { | ||
| --contrast-info-block-end: 0; | ||
| gap: var(--shim) var(--gutter); | ||
| // fixed width column to prevent layout shift as the ratio number changes | ||
| // fixed row height to prevent layout shift when warning appears | ||
| grid-template: | ||
| 'heading number' min-content | ||
| 'intro warning' var(--ratio-warning-height) / auto minmax( | ||
| var(--ratio-width), | ||
| 1fr | ||
| ); | ||
| } | ||
|
|
||
| @include config.above('lg-page-break') { | ||
| gap: var(--shim); | ||
| grid-template: | ||
| 'heading heading' auto | ||
| 'intro intro' auto | ||
| 'number warning' var(--ratio-warning-height) / var(--ratio-width) auto; | ||
| } | ||
| } | ||
|
|
||
|
|
@@ -138,15 +170,30 @@ | |
| } | ||
|
|
||
| .result-ratio { | ||
| align-items: var(--result-ratio-align, center); | ||
| display: inline-flex; | ||
| grid-area: number; | ||
| line-height: 0.7; // weird number alignment | ||
|
|
||
| @include config.between('sm-column-break', 'lg-page-break') { | ||
| --result-ratio-align: start; | ||
| justify-content: flex-end; | ||
| } | ||
| } | ||
| .result-warning-info { | ||
jgerigmeyer marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| align-items: center; | ||
| display: flex; | ||
| grid-area: warning; | ||
| } | ||
| .result-warning { | ||
jgerigmeyer marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| --warning-bg: var(--bg); | ||
| --warning-padding-block: var(--shim); | ||
| --warning-padding-inline: var(--shim); | ||
| --warning-size: border: var(--border-width) solid var(--border); | ||
| border-radius: var(--border-radius); | ||
| display: flex; | ||
| gap: var(--half-shim); | ||
| } | ||
|
|
||
| .result-ratio-number { | ||
| background-color: var(--status-result-bg, var(--bgcolor)); | ||
|
|
||
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
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
Oops, something went wrong.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Could we link these two notes directly to the fuller description (expanding if necessary)?
If not that, we could consider adding the fuller explanation in a tooltip/dialog here instead of in the expandable "issues" section.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think linking will be much easier once we're done with #223. I'm fine with moving it to a tooltip/dialog, but note we'd need to develop that pattern. I'll defer to @SondraE on what we should do.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ok, would it make more sense for me to focus on cleaning up #223 in the meantime @jamesnw? That PR just needs style cleanup, right?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Correct- that would be great!