@daviddarnes/contrast-details

contrast-details

A Web Component to display the contrast ratio and level of two colours using CSS custom properties

Demo | Further reading

Examples

General usage example:

<script type="module" src="contrast-details.js"></script>

<contrast-details style="--foreground: #000000; --background: #FCFAF2"></contrast-details>

Example using inherited values:

<div style="--foreground: #3D3D3D">
  <contrast-details style="--background: #613FE8"></contrast-details>
  <contrast-details style="--background: #FCFAF2"></contrast-details>
  <contrast-details style="--background: #FFFFFF"></contrast-details>
</div>

Example using a custom template:

<script type="module" src="contrast-details.js"></script>

<template id="contrast-details-template">
  <p>Contrast: <span data-key="ratio"></span> | <span data-key="level"></span></p>
</template>

<contrast-details style="--foreground: #000000; --background: #FCFAF2"></contrast-details>

Features

This Web Component allows you to:

• Compare two colours and render their contrast details
• Render the contrast ratio
• Render the contrast level, as per WCAG grading
• Utilise CSS custom properties to provide values, either on the element or through inheritance, which also allows the element to use those colours as you wish

Installation

You have a few options (choose one of these):

1. Install via npm: npm install @daviddarnes/contrast-details
2. Download the source manually from GitHub into your project.
3. Skip this step and use the script directly via a 3rd party CDN (not recommended for production use)

Usage

Make sure you include the <script> in your project (choose one of these):

<!-- Host yourself -->
<script type="module" src="contrast-details.js"></script>

<!-- 3rd party CDN, not recommended for production use -->
<script
  type="module"
  src="https://www.unpkg.com/@daviddarnes/contrast-details@1.0.0/contrast-details.js"
></script>

<!-- 3rd party CDN, not recommended for production use -->
<script
  type="module"
  src="https://esm.sh/@daviddarnes/contrast-details@1.0.0"
></script>

Credit

With thanks to the following people:

• Zach Leatherman for inspiring this Web Component repo template