contrast-swatch

by jxnblk

🅰️ Image microservice for color contrast information

210 Stars 7 Forks Last release: Not found 25 Commits 0 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

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

color contrast indicator

Markdown

![color contrast indicator](https://contrast.now.sh/cff/07c)

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 }) => 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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.