# Colour contrast

Test a text and background colour pair against WCAG 2.2 AA and AAA text-contrast thresholds. See the result on a real preview and export the numbers with the colours.

Version: 1.0.0
Page: https://tools.stuffonscreen.com/contrast-checker
Script: https://tools.stuffonscreen.com/widgets/v1.0.0/contrast-checker.js
Integrity: sha384-aYd7yj/YDvF0vA3yc/F1YFSx3awqSFew1RvDUoo7EoaYqC0KTMfJJ6KwrBCjoK0z
Self-host ZIP: https://tools.stuffonscreen.com/widgets/v1.0.0/contrast-checker.zip
Licence: https://tools.stuffonscreen.com/licence

## Install

```html
<script src="https://tools.stuffonscreen.com/widgets/v1.0.0/contrast-checker.js" defer></script>
<sos-contrast-checker data-config="{&quot;foreground&quot;:&quot;#173f35&quot;,&quot;background&quot;:&quot;#f6f1e8&quot;}"></sos-contrast-checker>
```

Keep the built-in visible credit (nofollow is allowed). The licence does not require a credit on exported files. Include scripts once per page.

## Configuration

The data-config attribute is a JSON object containing string values. When writing HTML, escape the JSON as an HTML attribute. Do not interpolate raw untrusted text. When creating an element in JavaScript, use element.setAttribute('data-config', JSON.stringify(config)).

- foreground: Text colour. 
- background: Background colour. 

Default configuration:

```json
{
  "foreground": "#173f35",
  "background": "#f6f1e8"
}
```

## Behaviour and limits

- AA requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 and 4.5:1 respectively. Pass/fail uses the unrounded ratio.
- Large text means at least 24 CSS pixels, or about 18.67 CSS pixels when bold. A colour pass does not assess font legibility or the rest of a page’s accessibility.
- This checks solid, opaque sRGB colours. Gradients, image backgrounds, transparency and APCA are not evaluated.
- Invalid configurations show an error instead of a partial result. Updating data-config rerenders the component.
- Styling is isolated with Shadow DOM. There are no tracking cookies, paid API calls or remote configuration requests.
- Browser JavaScript is required. Essential business/event information should also be in normal HTML for indexing and no-JS users.

Framework/CSP instructions: https://tools.stuffonscreen.com/docs/implementation.md