Contrast Swatch
Image microservice for color contrast information
Usage
Contrast swatch images can be used in any place an image is rendered. The URL accepts a foreground and background color.
https://contrast.now.sh/cff/40f
HTML
<img src="https://contrast.now.sh/cff/07c" alt="color contrast indicator" />Markdown
React
You can wrap the image in a React component (or any templating engine) for generating documentation.
import React from 'react'
export default ({
foreground,
background,
...props
}) =>
<img
{...props}
src={`https://contrast.now.sh/${foreground}/${background}`}
alt='color contrast indicator'
/>RGB
Compare two rgb values, or an rgb and a hex value:
https://contrast.now.sh/rgb(204,255,255)/40f
Customization
Use URL queries to customize the styles.
https://contrast.now.sh/cff/40f?width=256&height=96&fontSize=1.25
Pass/Fail Label
Font Size
Size
Width & Height
Custom Text
Font Weight
Radius
Options
| Option | Description |
|---|---|
size |
Width & height in pixels |
width |
Width of image in pixels |
height |
Height of image in pixels (font size will scale based on height) |
fontSize |
Relative font size (default 1) |
fontWeight |
Font weight (default 1) |
label |
Show a pass/fail label based on the WCAG Criteria |
radius |
Border radius |
baseline |
Shift text baseline down |
text |
Render any custom text |
Metadata
A JSON response with color contrast information can be fetched by adding the type=json query to the URL.
https://contrast.now.sh/cff/40f?type=json
Note: the returned JSON schema might change in a future version
Related
MIT License