A Web Component to display the contrast ratio and level of two colours using CSS custom properties
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>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
You have a few options (choose one of these):
- Install via npm:
npm install @daviddarnes/contrast-details - Download the source manually from GitHub into your project.
- Skip this step and use the script directly via a 3rd party CDN (not recommended for production use)
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.1/contrast-details.js"
></script><!-- 3rd party CDN, not recommended for production use -->
<script
type="module"
src="https://esm.sh/@daviddarnes/contrast-details@1.0.1"
></script>With thanks to the following people:
- Zach Leatherman for inspiring this Web Component repo template