Colour theory Typography

April 3, 2026

TypeScale Lab and Coloura

Design with structure and contrast in sync

Share

Mail to
Eugene, UX/UI Designer

In the beginning God created the heavens and the earth.

The world is full of obvious things which nobody by any chance ever observes.

Base size
16px
▼
Minor Third — 1.2
▼
Heading font
Inter
▼
Body font
Inter
▼

Live Preview

Base 16px LH 1.6 LS 0em

Type scale system

In the beginning God created the heavens and the earth.

The world is full of obvious things which nobody by any chance ever observes.

The world is full of obvious things which nobody by any chance ever observes.

In the beginning God created the heavens and the earth.

The world is full of obvious things which nobody by any chance ever observes.

In the beginning God created the heavens and the earth.

The world is full of obvious things which nobody by any chance ever observes.

Generated Scale

Balanced for digital interfaces
Style Preview Size

Type CSS Export

Rounded integer sizes

Live Contrast Preview

Ratio 0.00

Coloura

Where colour meets clarity

Use this tool to test different combinations, compare contrast levels, and see how small changes can completely shift the experience.

Primary action Secondary action
Foreground
#111111
Background
#F7F7F7

WCAG Summary

Checking contrast
Contrast ratio
0.00 : 1
Normal text AA
Fail
Large text AA
Fail
Normal text AAA
Fail
AA normal text
Requires 4.5:1
AA large text
Requires 3:1
AAA normal text
Requires 7:1
AAA large text
Requires 4.5:1

Colour CSS Export

Foreground + background tokens

From scale to contrast, all in one flow

TypeScale Lab + Coloura is an interactive tool for designing typography and color contrast together.
TypeScale Lab helps you quickly build a clear type hierarchy using scale ratios, while Coloura allows you to adjust text and background colors in real time and instantly check contrast levels.
By combining both, you can go beyond visual aesthetics and create interfaces that are clear, readable, and easy to understand.

Up Next

April 3, 2026

79+ design statistics

March 27, 2026

Coloura

March 27, 2026

Why UX works the way it does