How to find good looking font color if background color is known

Question

There seem to be so many color wheel  color picker  and color matcher web apps out there  where you give one color and the they ll find a couple of other colors that will create a harmonic layout when being used in combination  However most of them focus on background colors only and any text printed on each background color  if text is printed at all in the preview  is either black or white   My problem is different  I know the background color I want to use for a text area  What I need help with is choosing a couple of colors  the more  the merrier  I can use as font colors on this background  Most important is that the color will make sure the font is readable  contrast not being too low  also maybe not being too high to avoid that eyes are stressed  and of course that the combination of foreground and background just looks good   Anyone being aware of such an application  I d prefer a web application to anything I have to download  Thanks

User · Answer

I have implemented something similar for a different reason - that was code to tell the end user whether the foreground and background colors that they selected would result in unreadable text  To do this  rather than examining the RGB values  I converted the color value to HSL HSV and then determined by experimentation what my cutoff point was for readability when comparing the fg and bg values  This is something you may want need to consider

User · Answer

This is an interesting question  but I don t think this is actually possible   Whether or not two colors  fit  as background and foreground colors is dependent upon display technology and physiological characteristics of human vision  but most importantly on upon personal tastes shaped by experience   A quick run through MySpace shows pretty clearly that not all human beings perceive colors in the same way   I don t think this is a problem that can be solved algorithmically  although there may be a huge database somewhere of acceptable matching colors

User · Answer

If you need an algorithm  try this  Convert the color from RGB space to HSV space  Hue  Saturation  Value   If your UI framework can t do it  check this article  http   en wikipedia org wiki HSL and HSV Conversion from RGB to HSL or HSV  Hue is in  0 360   To find the  opposite  color  think colorwheel   just add 180 degrees    h    h   180    360    For saturation and value  invert them   l   1 0 - l  v   1 0 - v    Convert back to RGB  This should always give you a high contrast even though most combinations will look ugly   If you want to avoid the  ugly  part  build a table with several  good  combinations  find the one with the least difference  def q x       return x x def diff col1  col2       return math sqrt q col1 r-col2 r    q col1 g-col2 g    q col1 b-col2 b     and use that

User · Answer

Might be strange to answer my own question  but here is another really cool color picker I never saw before  It does not solve my problem either  -     however I think it s much cooler to these I know already   http   www colorjack com   On the right  under Tools select  Color Sphere   a very powerful and customizable sphere  see what you can do with the pop-ups on top    Color Galaxy   I m still not sure how this works  but looks cool and  Color Studio  is also nice  Further it can export to all kind of formats  e g  Illustrator or Photoshop  etc    How about this  I choose my background color there  let it create a complimentary color  from the first pop up  - this should have highest contrast and thus be best readable  now select the complementary color as main color and select neutral  Hmmm    not too great either  but we are getting better  -

User · Answer

Similar to  Aaron Digulla s suggestion except that I would suggest a graphics design tool  select the base color  in your case the background color  then adjust the Hue  Saturation and Value   Using this you can create color swatches very easily   Paint Net is free and I use it all the time for this and also the pay-for-tools will also do this

User · Answer

If you need an algorithm  try this  Convert the color from RGB space to HSV space  Hue  Saturation  Value   If your UI framework can t do it  check this article  http   en wikipedia org wiki HSL and HSV Conversion from RGB to HSL or HSV  Hue is in  0 360   To find the  opposite  color  think colorwheel   just add 180 degrees    h    h   180    360    For saturation and value  invert them   l   1 0 - l  v   1 0 - v    Convert back to RGB  This should always give you a high contrast even though most combinations will look ugly   If you want to avoid the  ugly  part  build a table with several  good  combinations  find the one with the least difference  def q x       return x x def diff col1  col2       return math sqrt q col1 r-col2 r    q col1 g-col2 g    q col1 b-col2 b     and use that

User · Answer

In a recent application that I made  I used the inverted colors  With the r g and b values in hand  just calculate  in this example  the color range varies from 0 to 255     r   127- r-127  and so on

User · Answer

Might be strange to answer my own question  but here is another really cool color picker I never saw before  It does not solve my problem either  -     however I think it s much cooler to these I know already   http   www colorjack com   On the right  under Tools select  Color Sphere   a very powerful and customizable sphere  see what you can do with the pop-ups on top    Color Galaxy   I m still not sure how this works  but looks cool and  Color Studio  is also nice  Further it can export to all kind of formats  e g  Illustrator or Photoshop  etc    How about this  I choose my background color there  let it create a complimentary color  from the first pop up  - this should have highest contrast and thus be best readable  now select the complementary color as main color and select neutral  Hmmm    not too great either  but we are getting better  -

User · Answer

Similar to  Aaron Digulla s suggestion except that I would suggest a graphics design tool  select the base color  in your case the background color  then adjust the Hue  Saturation and Value   Using this you can create color swatches very easily   Paint Net is free and I use it all the time for this and also the pay-for-tools will also do this

User · Answer

Have you considered letting the user of your application select their own color scheme  Without fail you won t be able to please all of your users with your selection but you can allow them to find what pleases them

User · Answer

Have you considered letting the user of your application select their own color scheme  Without fail you won t be able to please all of your users with your selection but you can allow them to find what pleases them

User · Answer

This is an interesting question  but I don t think this is actually possible   Whether or not two colors  fit  as background and foreground colors is dependent upon display technology and physiological characteristics of human vision  but most importantly on upon personal tastes shaped by experience   A quick run through MySpace shows pretty clearly that not all human beings perceive colors in the same way   I don t think this is a problem that can be solved algorithmically  although there may be a huge database somewhere of acceptable matching colors

User · Answer

In a recent application that I made  I used the inverted colors  With the r g and b values in hand  just calculate  in this example  the color range varies from 0 to 255     r   127- r-127  and so on

User · Answer

If you need an algorithm  try this  Convert the color from RGB space to HSV space  Hue  Saturation  Value   If your UI framework can t do it  check this article  http   en wikipedia org wiki HSL and HSV Conversion from RGB to HSL or HSV  Hue is in  0 360   To find the  opposite  color  think colorwheel   just add 180 degrees    h    h   180    360    For saturation and value  invert them   l   1 0 - l  v   1 0 - v    Convert back to RGB  This should always give you a high contrast even though most combinations will look ugly   If you want to avoid the  ugly  part  build a table with several  good  combinations  find the one with the least difference  def q x       return x x def diff col1  col2       return math sqrt q col1 r-col2 r    q col1 g-col2 g    q col1 b-col2 b     and use that

User · Answer

Similar to  Aaron Digulla s suggestion except that I would suggest a graphics design tool  select the base color  in your case the background color  then adjust the Hue  Saturation and Value   Using this you can create color swatches very easily   Paint Net is free and I use it all the time for this and also the pay-for-tools will also do this

User · Answer

Similar to  Aaron Digulla s suggestion except that I would suggest a graphics design tool  select the base color  in your case the background color  then adjust the Hue  Saturation and Value   Using this you can create color swatches very easily   Paint Net is free and I use it all the time for this and also the pay-for-tools will also do this

User · Answer

Okay  this is still not the best possible solution  but a nice point to start  I wrote a little Java app that calculates the contrast ratio of two colors and only processes colors with a ratio of 5 1 or better - this ratio and the formula I use has been released by the W3C and will probably replace the current recommendation  which I consider very limited   It creates a file in the current working dir named  chosen-font-colors html   with the background color of your choice and a line of text in every color that passed this W3C test  It expects a single argument  being the background color   E g  you can call it like this  java FontColorChooser 33FFB4   then just open the generated HTML file in a browser of your choice and choose a color from the list  All colors given passed the W3C test for this background color  You can change the cut off by replacing 5 with a number of your choice  lower numbers allow weaker contrasts  e g  3 will only make sure contrast is 3 1  10 will make sure it is at least 10 1  and you can also cut off to avoid too high contrasts  by making sure it is smaller than a certain number   e g  adding     cDiff  gt  18 0   to the if clause will make sure contrast won t be too extreme  as too extreme contrasts can stress your eyes  Here s the code and have fun playing around with it a bit  -   import java io        For text being readable  it must have a good contrast difference  Why     Your eye has receptors for brightness and receptors for each of the colors    red  green and blue  However  it has much more receptors for brightness    than for color  If you only change the color  but both colors have the    same contrast  your eye must distinguish fore- and background by the    color only and this stresses the brain a lot over the time  because it    can only use the very small amount of signals it gets from the color    receptors  since the breightness receptors won t note a difference     Actually contrast is so much more important than color that you don t    have to change the color at all  E g  light red on dark red reads nicely    even though both are the same color  red        public class FontColorChooser       int bred      int bgreen      int bblue       public FontColorChooser String hexColor  throws NumberFormatException           int i           i   Integer parseInt hexColor  16           bred    i  gt  gt  16           bgreen    i  gt  gt  8   amp  0xFF          bblue   i  amp  0xFF             public static void main String   args            FontColorChooser fcc           if  args length    0                System out println  Missing argument                 System out println                   The first argument must be the background                     color in hex notation                              System out println                   E g    FFFFFF   for white or   000000   for black                              return                    try               fcc   new FontColorChooser args 0              catch  Exception e                System out println                  args 0      is no valid hex color                              return                    try               fcc start              catch  IOException e                System out println  Failed to write output file                          public void start   throws IOException           int r          int b          int g          OutputStreamWriter out           out   new OutputStreamWriter              new FileOutputStream  chosen-font-colors html                 UTF-8                         simple  not W3C comform  most browsers won t care   HTML header         out write   lt html gt  lt head gt  lt title gt  n            out write   lt  title gt  lt style type   text css   gt  n            out write  body   background-color              out write rgb2hex bred  bgreen  bblue            out write      n lt  style gt  lt  head gt  n lt body gt  n                try 4096 colors         for  r   0  r  lt   15  r                  for  g   0  g  lt   15  g                      for  b   0  b  lt   15  b                          int red                      int blue                      int green                      double cDiff                          brightness increasse like this  00  11 22       ff                     red    r  lt  lt  4    r                      blue    b  lt  lt  4    b                      green    g  lt  lt  4    g                       cDiff   contrastDiff                          red  green  blue                          bred  bgreen  bblue                                            if  cDiff  lt  5 0  continue                      writeDiv red  green  blue  out                                                         finalize HTML document         out write   lt  body gt  lt  html gt              out close               private void writeDiv int r  int g  int b  OutputStreamWriter out          throws IOException               String hex           hex   rgb2hex r  g  b           out write   lt div style   color      hex       gt             out write  This is a sample text for color     hex     lt  div gt  n               private double contrastDiff          int r1  int g1  int b1  int r2  int g2  int b2                 double l1          double l2           l1                  0 2126   Math pow  double r1 255 0  2 2                0 7152   Math pow  double g1 255 0  2 2                0 0722   Math pow  double b1 255 0  2 2                0 05                    l2                  0 2126   Math pow  double r2 255 0  2 2                0 7152   Math pow  double g2 255 0  2 2                0 0722   Math pow  double b2 255 0  2 2                0 05                     return  l1  gt  l2     l1   l2     l2   l1              private String rgb2hex int r  int g  int b            String rs   Integer toHexString r           String gs   Integer toHexString g           String bs   Integer toHexString b           if  rs length      1  rs    0    rs          if  gs length      1  gs    0    gs          if  bs length      1  bs    0    bs          return  rs   gs   bs

User · Answer

Might be strange to answer my own question  but here is another really cool color picker I never saw before  It does not solve my problem either  -     however I think it s much cooler to these I know already   http   www colorjack com   On the right  under Tools select  Color Sphere   a very powerful and customizable sphere  see what you can do with the pop-ups on top    Color Galaxy   I m still not sure how this works  but looks cool and  Color Studio  is also nice  Further it can export to all kind of formats  e g  Illustrator or Photoshop  etc    How about this  I choose my background color there  let it create a complimentary color  from the first pop up  - this should have highest contrast and thus be best readable  now select the complementary color as main color and select neutral  Hmmm    not too great either  but we are getting better  -

User · Answer

Okay  this is still not the best possible solution  but a nice point to start  I wrote a little Java app that calculates the contrast ratio of two colors and only processes colors with a ratio of 5 1 or better - this ratio and the formula I use has been released by the W3C and will probably replace the current recommendation  which I consider very limited   It creates a file in the current working dir named  chosen-font-colors html   with the background color of your choice and a line of text in every color that passed this W3C test  It expects a single argument  being the background color   E g  you can call it like this  java FontColorChooser 33FFB4   then just open the generated HTML file in a browser of your choice and choose a color from the list  All colors given passed the W3C test for this background color  You can change the cut off by replacing 5 with a number of your choice  lower numbers allow weaker contrasts  e g  3 will only make sure contrast is 3 1  10 will make sure it is at least 10 1  and you can also cut off to avoid too high contrasts  by making sure it is smaller than a certain number   e g  adding     cDiff  gt  18 0   to the if clause will make sure contrast won t be too extreme  as too extreme contrasts can stress your eyes  Here s the code and have fun playing around with it a bit  -   import java io        For text being readable  it must have a good contrast difference  Why     Your eye has receptors for brightness and receptors for each of the colors    red  green and blue  However  it has much more receptors for brightness    than for color  If you only change the color  but both colors have the    same contrast  your eye must distinguish fore- and background by the    color only and this stresses the brain a lot over the time  because it    can only use the very small amount of signals it gets from the color    receptors  since the breightness receptors won t note a difference     Actually contrast is so much more important than color that you don t    have to change the color at all  E g  light red on dark red reads nicely    even though both are the same color  red        public class FontColorChooser       int bred      int bgreen      int bblue       public FontColorChooser String hexColor  throws NumberFormatException           int i           i   Integer parseInt hexColor  16           bred    i  gt  gt  16           bgreen    i  gt  gt  8   amp  0xFF          bblue   i  amp  0xFF             public static void main String   args            FontColorChooser fcc           if  args length    0                System out println  Missing argument                 System out println                   The first argument must be the background                     color in hex notation                              System out println                   E g    FFFFFF   for white or   000000   for black                              return                    try               fcc   new FontColorChooser args 0              catch  Exception e                System out println                  args 0      is no valid hex color                              return                    try               fcc start              catch  IOException e                System out println  Failed to write output file                          public void start   throws IOException           int r          int b          int g          OutputStreamWriter out           out   new OutputStreamWriter              new FileOutputStream  chosen-font-colors html                 UTF-8                         simple  not W3C comform  most browsers won t care   HTML header         out write   lt html gt  lt head gt  lt title gt  n            out write   lt  title gt  lt style type   text css   gt  n            out write  body   background-color              out write rgb2hex bred  bgreen  bblue            out write      n lt  style gt  lt  head gt  n lt body gt  n                try 4096 colors         for  r   0  r  lt   15  r                  for  g   0  g  lt   15  g                      for  b   0  b  lt   15  b                          int red                      int blue                      int green                      double cDiff                          brightness increasse like this  00  11 22       ff                     red    r  lt  lt  4    r                      blue    b  lt  lt  4    b                      green    g  lt  lt  4    g                       cDiff   contrastDiff                          red  green  blue                          bred  bgreen  bblue                                            if  cDiff  lt  5 0  continue                      writeDiv red  green  blue  out                                                         finalize HTML document         out write   lt  body gt  lt  html gt              out close               private void writeDiv int r  int g  int b  OutputStreamWriter out          throws IOException               String hex           hex   rgb2hex r  g  b           out write   lt div style   color      hex       gt             out write  This is a sample text for color     hex     lt  div gt  n               private double contrastDiff          int r1  int g1  int b1  int r2  int g2  int b2                 double l1          double l2           l1                  0 2126   Math pow  double r1 255 0  2 2                0 7152   Math pow  double g1 255 0  2 2                0 0722   Math pow  double b1 255 0  2 2                0 05                    l2                  0 2126   Math pow  double r2 255 0  2 2                0 7152   Math pow  double g2 255 0  2 2                0 0722   Math pow  double b2 255 0  2 2                0 05                     return  l1  gt  l2     l1   l2     l2   l1              private String rgb2hex int r  int g  int b            String rs   Integer toHexString r           String gs   Integer toHexString g           String bs   Integer toHexString b           if  rs length      1  rs    0    rs          if  gs length      1  gs    0    gs          if  bs length      1  bs    0    bs          return  rs   gs   bs

User · Answer

If you need an algorithm  try this  Convert the color from RGB space to HSV space  Hue  Saturation  Value   If your UI framework can t do it  check this article  http   en wikipedia org wiki HSL and HSV Conversion from RGB to HSL or HSV  Hue is in  0 360   To find the  opposite  color  think colorwheel   just add 180 degrees    h    h   180    360    For saturation and value  invert them   l   1 0 - l  v   1 0 - v    Convert back to RGB  This should always give you a high contrast even though most combinations will look ugly   If you want to avoid the  ugly  part  build a table with several  good  combinations  find the one with the least difference  def q x       return x x def diff col1  col2       return math sqrt q col1 r-col2 r    q col1 g-col2 g    q col1 b-col2 b     and use that

User · Answer

This is an interesting question  but I don t think this is actually possible   Whether or not two colors  fit  as background and foreground colors is dependent upon display technology and physiological characteristics of human vision  but most importantly on upon personal tastes shaped by experience   A quick run through MySpace shows pretty clearly that not all human beings perceive colors in the same way   I don t think this is a problem that can be solved algorithmically  although there may be a huge database somewhere of acceptable matching colors

User · Answer

This is an interesting question  but I don t think this is actually possible   Whether or not two colors  fit  as background and foreground colors is dependent upon display technology and physiological characteristics of human vision  but most importantly on upon personal tastes shaped by experience   A quick run through MySpace shows pretty clearly that not all human beings perceive colors in the same way   I don t think this is a problem that can be solved algorithmically  although there may be a huge database somewhere of acceptable matching colors

User · Answer

I have implemented something similar for a different reason - that was code to tell the end user whether the foreground and background colors that they selected would result in unreadable text  To do this  rather than examining the RGB values  I converted the color value to HSL HSV and then determined by experimentation what my cutoff point was for readability when comparing the fg and bg values  This is something you may want need to consider

User · Answer

I have implemented something similar for a different reason - that was code to tell the end user whether the foreground and background colors that they selected would result in unreadable text  To do this  rather than examining the RGB values  I converted the color value to HSL HSV and then determined by experimentation what my cutoff point was for readability when comparing the fg and bg values  This is something you may want need to consider

User · Answer

Might be strange to answer my own question  but here is another really cool color picker I never saw before  It does not solve my problem either  -     however I think it s much cooler to these I know already   http   www colorjack com   On the right  under Tools select  Color Sphere   a very powerful and customizable sphere  see what you can do with the pop-ups on top    Color Galaxy   I m still not sure how this works  but looks cool and  Color Studio  is also nice  Further it can export to all kind of formats  e g  Illustrator or Photoshop  etc    How about this  I choose my background color there  let it create a complimentary color  from the first pop up  - this should have highest contrast and thus be best readable  now select the complementary color as main color and select neutral  Hmmm    not too great either  but we are getting better  -

User · Answer

Personally I don t think we can find out an algorithm to calculate the most matched text color by specifying the background color   I think currently the artist should have a list of color pairs which has good reading quality  we can add them to a table  and set one of these pairs randomly as our reading theme     this is much reasonable  and we won t get ugly color pairs

User · Answer

I have implemented something similar for a different reason - that was code to tell the end user whether the foreground and background colors that they selected would result in unreadable text  To do this  rather than examining the RGB values  I converted the color value to HSL HSV and then determined by experimentation what my cutoff point was for readability when comparing the fg and bg values  This is something you may want need to consider

User · Answer

Have you considered letting the user of your application select their own color scheme  Without fail you won t be able to please all of your users with your selection but you can allow them to find what pleases them

User · Answer

Okay  this is still not the best possible solution  but a nice point to start  I wrote a little Java app that calculates the contrast ratio of two colors and only processes colors with a ratio of 5 1 or better - this ratio and the formula I use has been released by the W3C and will probably replace the current recommendation  which I consider very limited   It creates a file in the current working dir named  chosen-font-colors html   with the background color of your choice and a line of text in every color that passed this W3C test  It expects a single argument  being the background color   E g  you can call it like this  java FontColorChooser 33FFB4   then just open the generated HTML file in a browser of your choice and choose a color from the list  All colors given passed the W3C test for this background color  You can change the cut off by replacing 5 with a number of your choice  lower numbers allow weaker contrasts  e g  3 will only make sure contrast is 3 1  10 will make sure it is at least 10 1  and you can also cut off to avoid too high contrasts  by making sure it is smaller than a certain number   e g  adding     cDiff  gt  18 0   to the if clause will make sure contrast won t be too extreme  as too extreme contrasts can stress your eyes  Here s the code and have fun playing around with it a bit  -   import java io        For text being readable  it must have a good contrast difference  Why     Your eye has receptors for brightness and receptors for each of the colors    red  green and blue  However  it has much more receptors for brightness    than for color  If you only change the color  but both colors have the    same contrast  your eye must distinguish fore- and background by the    color only and this stresses the brain a lot over the time  because it    can only use the very small amount of signals it gets from the color    receptors  since the breightness receptors won t note a difference     Actually contrast is so much more important than color that you don t    have to change the color at all  E g  light red on dark red reads nicely    even though both are the same color  red        public class FontColorChooser       int bred      int bgreen      int bblue       public FontColorChooser String hexColor  throws NumberFormatException           int i           i   Integer parseInt hexColor  16           bred    i  gt  gt  16           bgreen    i  gt  gt  8   amp  0xFF          bblue   i  amp  0xFF             public static void main String   args            FontColorChooser fcc           if  args length    0                System out println  Missing argument                 System out println                   The first argument must be the background                     color in hex notation                              System out println                   E g    FFFFFF   for white or   000000   for black                              return                    try               fcc   new FontColorChooser args 0              catch  Exception e                System out println                  args 0      is no valid hex color                              return                    try               fcc start              catch  IOException e                System out println  Failed to write output file                          public void start   throws IOException           int r          int b          int g          OutputStreamWriter out           out   new OutputStreamWriter              new FileOutputStream  chosen-font-colors html                 UTF-8                         simple  not W3C comform  most browsers won t care   HTML header         out write   lt html gt  lt head gt  lt title gt  n            out write   lt  title gt  lt style type   text css   gt  n            out write  body   background-color              out write rgb2hex bred  bgreen  bblue            out write      n lt  style gt  lt  head gt  n lt body gt  n                try 4096 colors         for  r   0  r  lt   15  r                  for  g   0  g  lt   15  g                      for  b   0  b  lt   15  b                          int red                      int blue                      int green                      double cDiff                          brightness increasse like this  00  11 22       ff                     red    r  lt  lt  4    r                      blue    b  lt  lt  4    b                      green    g  lt  lt  4    g                       cDiff   contrastDiff                          red  green  blue                          bred  bgreen  bblue                                            if  cDiff  lt  5 0  continue                      writeDiv red  green  blue  out                                                         finalize HTML document         out write   lt  body gt  lt  html gt              out close               private void writeDiv int r  int g  int b  OutputStreamWriter out          throws IOException               String hex           hex   rgb2hex r  g  b           out write   lt div style   color      hex       gt             out write  This is a sample text for color     hex     lt  div gt  n               private double contrastDiff          int r1  int g1  int b1  int r2  int g2  int b2                 double l1          double l2           l1                  0 2126   Math pow  double r1 255 0  2 2                0 7152   Math pow  double g1 255 0  2 2                0 0722   Math pow  double b1 255 0  2 2                0 05                    l2                  0 2126   Math pow  double r2 255 0  2 2                0 7152   Math pow  double g2 255 0  2 2                0 0722   Math pow  double b2 255 0  2 2                0 05                     return  l1  gt  l2     l1   l2     l2   l1              private String rgb2hex int r  int g  int b            String rs   Integer toHexString r           String gs   Integer toHexString g           String bs   Integer toHexString b           if  rs length      1  rs    0    rs          if  gs length      1  gs    0    gs          if  bs length      1  bs    0    bs          return  rs   gs   bs

User · Answer

Have you considered letting the user of your application select their own color scheme  Without fail you won t be able to please all of your users with your selection but you can allow them to find what pleases them

User · Answer

Okay  this is still not the best possible solution  but a nice point to start  I wrote a little Java app that calculates the contrast ratio of two colors and only processes colors with a ratio of 5 1 or better - this ratio and the formula I use has been released by the W3C and will probably replace the current recommendation  which I consider very limited   It creates a file in the current working dir named  chosen-font-colors html   with the background color of your choice and a line of text in every color that passed this W3C test  It expects a single argument  being the background color   E g  you can call it like this  java FontColorChooser 33FFB4   then just open the generated HTML file in a browser of your choice and choose a color from the list  All colors given passed the W3C test for this background color  You can change the cut off by replacing 5 with a number of your choice  lower numbers allow weaker contrasts  e g  3 will only make sure contrast is 3 1  10 will make sure it is at least 10 1  and you can also cut off to avoid too high contrasts  by making sure it is smaller than a certain number   e g  adding     cDiff  gt  18 0   to the if clause will make sure contrast won t be too extreme  as too extreme contrasts can stress your eyes  Here s the code and have fun playing around with it a bit  -   import java io        For text being readable  it must have a good contrast difference  Why     Your eye has receptors for brightness and receptors for each of the colors    red  green and blue  However  it has much more receptors for brightness    than for color  If you only change the color  but both colors have the    same contrast  your eye must distinguish fore- and background by the    color only and this stresses the brain a lot over the time  because it    can only use the very small amount of signals it gets from the color    receptors  since the breightness receptors won t note a difference     Actually contrast is so much more important than color that you don t    have to change the color at all  E g  light red on dark red reads nicely    even though both are the same color  red        public class FontColorChooser       int bred      int bgreen      int bblue       public FontColorChooser String hexColor  throws NumberFormatException           int i           i   Integer parseInt hexColor  16           bred    i  gt  gt  16           bgreen    i  gt  gt  8   amp  0xFF          bblue   i  amp  0xFF             public static void main String   args            FontColorChooser fcc           if  args length    0                System out println  Missing argument                 System out println                   The first argument must be the background                     color in hex notation                              System out println                   E g    FFFFFF   for white or   000000   for black                              return                    try               fcc   new FontColorChooser args 0              catch  Exception e                System out println                  args 0      is no valid hex color                              return                    try               fcc start              catch  IOException e                System out println  Failed to write output file                          public void start   throws IOException           int r          int b          int g          OutputStreamWriter out           out   new OutputStreamWriter              new FileOutputStream  chosen-font-colors html                 UTF-8                         simple  not W3C comform  most browsers won t care   HTML header         out write   lt html gt  lt head gt  lt title gt  n            out write   lt  title gt  lt style type   text css   gt  n            out write  body   background-color              out write rgb2hex bred  bgreen  bblue            out write      n lt  style gt  lt  head gt  n lt body gt  n                try 4096 colors         for  r   0  r  lt   15  r                  for  g   0  g  lt   15  g                      for  b   0  b  lt   15  b                          int red                      int blue                      int green                      double cDiff                          brightness increasse like this  00  11 22       ff                     red    r  lt  lt  4    r                      blue    b  lt  lt  4    b                      green    g  lt  lt  4    g                       cDiff   contrastDiff                          red  green  blue                          bred  bgreen  bblue                                            if  cDiff  lt  5 0  continue                      writeDiv red  green  blue  out                                                         finalize HTML document         out write   lt  body gt  lt  html gt              out close               private void writeDiv int r  int g  int b  OutputStreamWriter out          throws IOException               String hex           hex   rgb2hex r  g  b           out write   lt div style   color      hex       gt             out write  This is a sample text for color     hex     lt  div gt  n               private double contrastDiff          int r1  int g1  int b1  int r2  int g2  int b2                 double l1          double l2           l1                  0 2126   Math pow  double r1 255 0  2 2                0 7152   Math pow  double g1 255 0  2 2                0 0722   Math pow  double b1 255 0  2 2                0 05                    l2                  0 2126   Math pow  double r2 255 0  2 2                0 7152   Math pow  double g2 255 0  2 2                0 0722   Math pow  double b2 255 0  2 2                0 05                     return  l1  gt  l2     l1   l2     l2   l1              private String rgb2hex int r  int g  int b            String rs   Integer toHexString r           String gs   Integer toHexString g           String bs   Integer toHexString b           if  rs length      1  rs    0    rs          if  gs length      1  gs    0    gs          if  bs length      1  bs    0    bs          return  rs   gs   bs

User · Answer

Personally I don t think we can find out an algorithm to calculate the most matched text color by specifying the background color   I think currently the artist should have a list of color pairs which has good reading quality  we can add them to a table  and set one of these pairs randomly as our reading theme     this is much reasonable  and we won t get ugly color pairs

[colors] How to find good looking font color if background color is known?

Examples related to colors

Examples related to accessibility

Examples related to readability