Kontrasto

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.

Usage

Install Kontrasto from:

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.

Demo

For each image, we display the test text across 9 areas. Each area has the text 4 times: first the result of server-side processing, with WCAG 2 and WCAG 3 contrast ratio calculations. Then the result of client-side processing, also with WCAG 2 and WCAG 3 contrast ratio calculations.

Blue sky and sea in the background with a cliff face to the rigt half, people atop the cliff.jpg
Building exit covered in mirror faces in all directions, reflecting the street outside, with a road crossing and pedestrians.jpg
Candle-lit lanterns attached to a ceiling arranged in regular rows, seen from underneath.jpg
Five framed handpainted kanji sheets side by side on a wall.jpg
Ice shelf with a pier in the foreground, and in the distance a distorted mirage of the coast.jpg
Shop shelves with 4 rows of dark soy sauce bottles.jpg
Street in the middle of the city with parked cars and buildings on both sides, opening to the sea, cloud, blue sky in the distance.jpg
Mountainous landscape at dusk, with dark trees and mountain contours, and a bright sky with orange clouds.jpg
Landscape with lush jungle in the foreground, blue sea in the distance, and a city on the opposite shore further away.jpg
Sunset from the air, with dark orange and blue tones, and the contour of a plane wing in the foreground.jpg
Snow-covered landscape with snow-covered trees, blue-white sky, and a snow-covered radio tower on the horizon.jpg
Foggy landscape with oily sea in the foreground, japanese pier and houses in the middle, and foggy tree-covered hills in the background.jpg
Cityscape with a lake in the foreground, covered in weeds, with building reflections in the water.jpg
Manhattan skyline seen from above, with Hudson river in the distance, blue cloudy sky.jpg