Fork me on GitHub

Find me the good constrasts, for web accessibility, between these two colors:

Foreground Color : invalid color For each color (red, green and blue), enter a number between 0 et 255. The color should be between #000000 and #FFFFFF
Background Color : invalid color For each color (red, green and blue), enter a number between 0 et 255. The color should be between #000000 and #FFFFFF

In the international reglementation etablished by the WCAG, the success criteria 1.4.3 requires a minimum contrast ratio of 4.5:1 (and 3:1 for enlarged text).

This minimum contrast ratio is also required by the French regulation, established by the RGAA 3.0 2016, in the criteria 3.3 et 3.4.

Component to edit :
Gimme :

Old contrast

Invalid contrast
Foreground Background Sample Ratio Distance
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(23, 100%, 50%)
  • rgb(255, 102, 0)
  • #FF6600

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

2.93602

New contrast : 41 results (1,075,840 colors tested)

Valid contrasts
Foreground Background Sample Ratio Distance
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(20, 96%, 41%)
  • rgb(209, 73, 4)
  • #D14904

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.5008 49.55
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(19, 95%, 41%)
  • rgb(209, 73, 5)
  • #D14905

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.50038 49.54
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(19, 90%, 42%)
  • rgb(208, 74, 10)
  • #D04A0A

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.50076 49.97
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(19, 89%, 42%)
  • rgb(208, 74, 11)
  • #D04A0B

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.50033 49.93
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(19, 83%, 43%)
  • rgb(204, 78, 18)
  • #CC4E12

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.50068 52.0
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(19, 82%, 43%)
  • rgb(204, 78, 19)
  • #CC4E13

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.50003 51.88
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(19, 84%, 43%)
  • rgb(203, 79, 17)
  • #CB4F11

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.50085 52.88
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(19, 83%, 43%)
  • rgb(203, 79, 18)
  • #CB4F12

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.50023 52.77
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(20, 86%, 42%)
  • rgb(202, 80, 15)
  • #CA500F

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.50096 53.85
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(20, 85%, 42%)
  • rgb(202, 80, 16)
  • #CA5010

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.50039 53.77
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(21, 88%, 41%)
  • rgb(201, 81, 12)
  • #C9510C

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.50085 54.85
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(21, 87%, 41%)
  • rgb(201, 81, 13)
  • #C9510D

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.50037 54.8
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(23, 93%, 40%)
  • rgb(200, 82, 7)
  • #C85207

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.50078 55.83
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(23, 92%, 40%)
  • rgb(200, 82, 8)
  • #C85208

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.50036 55.81
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(25, 100%, 39%)
  • rgb(199, 83, 0)
  • #C75300

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.50091 56.72
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(24, 98%, 39%)
  • rgb(199, 83, 1)
  • #C75301

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.50049 56.72
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(24, 98%, 39%)
  • rgb(199, 83, 2)
  • #C75302

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.50006 56.72
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(19, 72%, 44%)
  • rgb(196, 85, 31)
  • #C4551F

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.50032 56.51
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(21, 76%, 43%)
  • rgb(195, 86, 26)
  • #C3561A

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.50021 58.72
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(23, 83%, 41%)
  • rgb(194, 87, 18)
  • #C25712

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.50076 60.78
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(23, 82%, 41%)
  • rgb(194, 87, 19)
  • #C25713

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.50011 60.69
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(26, 93%, 39%)
  • rgb(193, 88, 6)
  • #C15806

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.50063 62.22
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(26, 93%, 39%)
  • rgb(193, 88, 7)
  • #C15807

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.50021 62.21
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(19, 66%, 45%)
  • rgb(192, 88, 39)
  • #C05827

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.50018 57.84
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(21, 70%, 43%)
  • rgb(191, 89, 33)
  • #BF5921

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.50046 61.13
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(23, 76%, 42%)
  • rgb(190, 90, 25)
  • #BE5A19

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.50071 63.88
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(26, 87%, 39%)
  • rgb(189, 91, 13)
  • #BD5B0D

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.50063 65.93
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(26, 86%, 39%)
  • rgb(189, 91, 14)
  • #BD5B0E

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.50012 65.89
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(22, 70%, 43%)
  • rgb(187, 92, 33)
  • #BB5C21

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.50086 65.38
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(25, 77%, 40%)
  • rgb(186, 93, 23)
  • #BA5D17

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.50071 68.19
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(20, 60%, 45%)
  • rgb(185, 93, 45)
  • #B95D2D

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.50017 63.21
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(23, 66%, 43%)
  • rgb(184, 94, 37)
  • #B85E25

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.50077 67.52
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(26, 74%, 41%)
  • rgb(183, 95, 27)
  • #B75F1B

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.50048 70.73
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(24, 65%, 42%)
  • rgb(181, 96, 38)
  • #B56026

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.50075 70.51
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(27, 73%, 40%)
  • rgb(180, 97, 27)
  • #B4611B

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.50029 73.82
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(23, 59%, 44%)
  • rgb(179, 97, 46)
  • #B3612E

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.50058 69.92
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(19, 50%, 46%)
  • rgb(178, 97, 59)
  • #B2613B

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.50062 63.1
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(22, 54%, 44%)
  • rgb(177, 98, 52)
  • #B16234

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.50056 69.38
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(25, 60%, 42%)
  • rgb(176, 99, 43)
  • #B0632B

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.50099 74.5
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(28, 69%, 40%)
  • rgb(175, 100, 32)
  • #AF6420

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.50014 78.26
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(21, 50%, 45%)
  • rgb(175, 99, 57)
  • #AF6339

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.50006 68.88
Not satisfied ?
Gimme a range of colors