Need help with contrast-swatch?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

jxnblk
209 Stars 7 Forks 25 Commits 2 Opened issues

Description

🅰️ Image microservice for color contrast information

Services available

!
?

Need anything else?

Contributors list

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.