Color contrast checker of text and background colors

This is a pangram

Typography is known for two-dimensional architecture and requires extra zeal within every job.

  • Light
  • Regular
  • Medium
  • Bold
Az
{{contrast(textcolor,bgcolor)}}:1
Change text color
Random color
Change background color
Random color

Color contrast — {{contrast(textcolor,bgcolor)}}:1

Suitable for the title!
Not suitable for the title!
AA — 3.1:1
AAA — 4.5:1
Suitable for description!
Not suitable for description!
AA — 4.5:1
AAA — 7.1:1

You can read about contrast standards in the interface here — WCAG

{{textcolor}}


Dorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a footer or cite element.

Someone famous in Source Title
Progress
G

Gradients.app

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

{{bgcolor}}


Dorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a footer or cite element.

Someone famous in Source Title
Progress
G

Gradients.app

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Tools

Hello,
nice to see you!

Forgot Password?

Enter the email address you used when you joined and we’ll send you instructions to reset your password.

Create
a new account

Password mismatch

Introducing Mesh Gradients

We've added a mesh gradient generator and a new mesh library for you to enrich with your gradients. Now you can create beautiful abstract gradients, download them, copy their CSS codes, save them in your personal dashboard, and add them to the public library.

We will soon add a radial gradient generator!

Mesh Gradients