Skip to content

Commit

Permalink
Add color issues section
Browse files Browse the repository at this point in the history
jamesnw committed Nov 30, 2023
1 parent 89f94c6 commit 30a7bba
Showing 2 changed files with 57 additions and 0 deletions.
54 changes: 54 additions & 0 deletions src/lib/components/ratio/ColorIssues.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
<script lang="ts">
import { onMount } from 'svelte';
import { RATIOS } from '$lib/constants';
import ExternalLink from '../util/ExternalLink.svelte';
export let ratio: number;
$: pass = ratio >= RATIOS['AA']['Normal'];
let startOpen = false;
onMount(() => {
startOpen = window.matchMedia('(min-width: 80em)').matches;
});
</script>

<details open={startOpen} data-pass={pass}>
<summary>Known Color Issues</summary>
<dl>
<dt>Gamut Mapping implementation</dt>
<dd>
Browsers implemented gamut mapping using clipping, which is fast but
provides inferior results to the algorithm defined in the <ExternalLink
href="https://drafts.csswg.org/css-color/#binsearch"
>CSS Spec</ExternalLink
>. Until browsers are updated, colors that are out of gamut for your
screen may be displayed very differently than expected.
</dd>
</dl>
</details>

<style lang="scss">
// Overrides the pattern from _lists
dl {
display: block;
}
dt {
font-weight: bold;
}
dd {
margin-inline-start: 0;
}
summary {
font-weight: bold;
list-style-position: outside;
}
details {
background-color: var(--status-result-bg, var(--bgcolor));
border-radius: var(--border-radius);
color: var(--status-result-fg, var(--fgcolor));
padding: var(--double-gutter);
}
</style>
3 changes: 3 additions & 0 deletions src/lib/components/ratio/index.svelte
Original file line number Diff line number Diff line change
@@ -6,6 +6,8 @@
import { RATIOS } from '$lib/constants';
import { bg, fg } from '$lib/stores';
import ColorIssues from './ColorIssues.svelte';
$: ratio = contrast($bg, $fg, 'WCAG21');
$: displayRatio = Math.round((ratio + Number.EPSILON) * 100) / 100;
$: pass = ratio >= RATIOS.AA.Large;
@@ -65,6 +67,7 @@
<dd>Bold Weight</dd>
</dl>
</div>
<ColorIssues {ratio} />
</aside>

<style lang="scss">

0 comments on commit 30a7bba

Please sign in to comment.