🎨 Automated color contrast for text over images

Usage no npm install needed!

<script type="module">
  import kontrasto from 'https://cdn.skypack.dev/kontrasto';



PyPI npm PyPI downloads Build status Coverage Status Total alerts Netlify Status

🎨 Automated color contrast for text over images

Why we need this

Kontrasto is a dual Python and JavaScript library which analyses instances of text over images, and transforms the text to make it more readable and have a higher contrast against the background.

Using Kontrasto both server-side and client-side gives the best results: server-side processing means users will have the best possible styles as the page loads, while client-side processing can refine the result based on the final position of the text over the image.

Here is a demo, over different areas of an image, with different methods of dominant color extraction and contrast ratio calculation:

Snow-covered landscape with snow-covered trees, blue-white sky, and a snow-covered radio tower on the horizon

Check out our live demo for other examples.

Usage in Python

kontrasto is available on PyPI.

# Assuming you’re using Python 3.6+,
pip install kontrasto

Usage in JavaScript

kontrasto is available on npm.

npm install kontrasto


See anything you like in here? Anything missing? We welcome all support, whether on bug reports, feature requests, code, design, reviews, tests, documentation, and more. Please have a look at our contribution guidelines.

If you just want to set up the project on your own computer, the contribution guidelines also contain all of the setup commands.


Image credit: FxEmojis. Test templates extracted from third-party projects. Website hosted by Netlify.

View the full list of contributors. MIT licensed. Website content available as CC0.