All Projects → jxnblk → Contrast Swatch

jxnblk / Contrast Swatch

🅰️ Image microservice for color contrast information

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Contrast Swatch

Ruby Gem Downloads Badge
Clean and simple gem downloads count badge, courtesy of http://shields.io/. You can checkout the application directly at the following URL:
Stars: ✭ 29 (-86.19%)
Mutual labels:  svg, image, badge, color
Badgen.net
Fast badge service
Stars: ✭ 1,045 (+397.62%)
Mutual labels:  svg, badge
Shields
Concise, consistent, and legible badges in SVG and raster format
Stars: ✭ 15,716 (+7383.81%)
Mutual labels:  svg, badge
Design System Site
📚 Documentation, rationale and accessibility guidance
Stars: ✭ 72 (-65.71%)
Mutual labels:  documentation, accessibility
Color.js
Extract colors from an image (0.75 KB) 🎨
Stars: ✭ 42 (-80%)
Mutual labels:  image, color
Website
Website and documentation for Radix.
Stars: ✭ 45 (-78.57%)
Mutual labels:  documentation, accessibility
Mathjax
Beautiful and accessible math in all browsers
Stars: ✭ 8,551 (+3971.9%)
Mutual labels:  svg, accessibility
Itext7
iText 7 for Java represents the next level of SDKs for developers that want to take advantage of the benefits PDF can bring. Equipped with a better document engine, high and low-level programming capabilities and the ability to create, edit and enhance PDF documents, iText 7 can be a boon to nearly every workflow.
Stars: ✭ 913 (+334.76%)
Mutual labels:  svg, accessibility
Uitabbaritem Custombadge
UITabBarItem+CustomBadge is a workaround to change the aspect of IOS UIBadgeView
Stars: ✭ 84 (-60%)
Mutual labels:  badge, color
A11y.css
This CSS file intends to warn developers about possible risks and mistakes that exist in HTML code. It can also be used to roughly evaluate a site's quality by simply including it as an external stylesheet.
Stars: ✭ 1,277 (+508.1%)
Mutual labels:  documentation, accessibility
I7j Pdfhtml
pdfHTML is an iText 7 add-on for Java that allows you to easily convert HTML and CSS into standards compliant PDFs that are accessible, searchable and usable for indexing.
Stars: ✭ 104 (-50.48%)
Mutual labels:  svg, accessibility
Contrast Finder
Contrast-Finder finds correct color contrasts (background / foreground) for web accessibility (a11y, WCAG, RGAA). https://app.contrast-finder.org
Stars: ✭ 38 (-81.9%)
Mutual labels:  accessibility, color
Php badge
This is an identification tag based on SVG, It can quickly generate various labels and status identifiers
Stars: ✭ 101 (-51.9%)
Mutual labels:  svg, badge
Imagine Svg
Contao Imagine SVG Library
Stars: ✭ 48 (-77.14%)
Mutual labels:  svg, image
Sass A11ycolor
🌈 Generate the nearest accessible color with Sass.
Stars: ✭ 24 (-88.57%)
Mutual labels:  accessibility, color
Openhtmltopdf
An HTML to PDF library for the JVM. Based on Flying Saucer and Apache PDF-BOX 2. With SVG image support. Now also with accessible PDF support (WCAG, Section 508, PDF/UA)!
Stars: ✭ 1,096 (+421.9%)
Mutual labels:  svg, accessibility
Pixterm
Draw images in your ANSI terminal with true color
Stars: ✭ 782 (+272.38%)
Mutual labels:  image, color
Iro.js
🎨 Modular color picker widget for JavaScript, with support for a bunch of color formats
Stars: ✭ 796 (+279.05%)
Mutual labels:  svg, color
React Image Timeline
📆 An image-centric timeline component for React.js
Stars: ✭ 77 (-63.33%)
Mutual labels:  svg, image
Python Altium
Altium schematic format documentation, SVG converter and TK viewer
Stars: ✭ 112 (-46.67%)
Mutual labels:  documentation, svg

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

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].