Trouver la couleur qui convient le mieux pour un texte

Version imprimable

Bonjour

Presque tout est dans le titre comment, en fonction d'un fond en couleur trouver la meilleure couleur du texte (blanc ou noir) ?
Il doit certainement y avoir une réponse simple mais, moi et les couleurs ....

j'ai bien fait ce petit test

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
unit UnitColorFont;
 
interface
 
uses
  System.SysUtils, System.Types, System.UITypes, System.Classes, System.Variants,
  FMX.Types, FMX.Controls, FMX.Forms, FMX.Graphics, FMX.Dialogs,
  Data.Bind.EngExt, Fmx.Bind.DBEngExt, System.Rtti, System.Bindings.Outputs,
  Fmx.Bind.Editors, Data.Bind.Components, FMX.Colors, FMX.Objects,
  FMX.Controls.Presentation, FMX.StdCtrls, FMX.ScrollBox, FMX.Memo;
 
type
  TForm64 = class(TForm)
    RectangleTest: TRectangle;
    TextTest: TText;
    ComboColorBox1: TComboColorBox;
    BindingsList1: TBindingsList;
    LinkControlToPropertyFillColor: TLinkControlToProperty;
    procedure ComboColorBox1Change(Sender: TObject);
  private
    { Déclarations privées }
  public
    { Déclarations publiques }
  end;
 
var
  Form64: TForm64;
 
implementation
 
{$R *.fmx}
 
procedure TForm64.ComboColorBox1Change(Sender: TObject);
var C : TAlphaColorRec;
begin
  C:= TAlphaColorRec(RectangleTest.Fill.Color);
  if (C.R + C.G + C.B) > 384
   then TextTest.TextSettings.FontColor:=TAlphaColorRec.Black
   else TextTest.TextSettings.FontColor:=TAlphaColorRec.White;
end;
 
end.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
object Form64: TForm64
  Left = 0
  Top = 0
  Caption = 'Form64'
  ClientHeight = 197
  ClientWidth = 525
  FormFactor.Width = 320
  FormFactor.Height = 480
  FormFactor.Devices = [Desktop]
  DesignerMasterStyle = 0
  object RectangleTest: TRectangle
    Fill.Color = claWhite
    Position.X = 17.000000000000000000
    Position.Y = 61.000000000000000000
    Size.Width = 256.000000000000000000
    Size.Height = 25.000000000000000000
    Size.PlatformDefault = False
    object TextTest: TText
      Align = Client
      Locked = True
      Size.Width = 256.000000000000000000
      Size.Height = 25.000000000000000000
      Size.PlatformDefault = False
      Text = 'ligne test '
    end
  end
  object ComboColorBox1: TComboColorBox
    Color = claWhite
    Position.X = 288.000000000000000000
    Position.Y = 62.000000000000000000
    Size.Width = 60.000000000000000000
    Size.Height = 22.000000000000000000
    Size.PlatformDefault = False
    TabOrder = 1
    OnChange = ComboColorBox1Change
  end
  object BindingsList1: TBindingsList
    Methods = <>
    OutputConverters = <>
    Left = 412
    Top = 21
    object LinkControlToPropertyFillColor: TLinkControlToProperty
      Category = 'Liaisons rapides'
      Control = ComboColorBox1
      Track = True
      Component = RectangleTest
      ComponentProperty = 'Fill.Color'
    end
  end
end

mais je trouve le résultat "limite"

je n'ai pas testé mais tu as cette discussion sur stackoverflow avec cette fonction pour Delphi

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
function GetContrastColor(ABGColor: TColor): TColor;
var
  ADouble: Double;
  R, G, B: Byte;
begin
  if ABGColor <= 0 then
  begin
    Result := clWhite;
    Exit; // *** EXIT RIGHT HERE ***
  end;
 
  if ABGColor = clWhite then
  begin
    Result := clBlack;
    Exit; // *** EXIT RIGHT HERE ***
  end;
 
  // Get RGB from Color
  R := GetRValue(ABGColor);
  G := GetGValue(ABGColor);
  B := GetBValue(ABGColor);
 
  // Counting the perceptive luminance - human eye favors green color...
  ADouble := 1 - (0.299 * R + 0.587 * G + 0.114 * B) / 255;
 
  if (ADouble < 0.5) then
    Result := clBlack  // bright colors - black font
  else
    Result := clWhite;  // dark colors - white font
end;

Merci,

J'ai essayé plusieurs calculs différents et pour l'instant celui-ci remporte la palme quand le travail se fait sur RGB

Est-ce qu'utiliser HSL (Hue, Saturation et Luminance) ne serait pas une autre piste ?
Mon test, nécessitant l'unité UIConsts fonctionne pas mal non plus
Code:

1 2 3 4 5 6 7 8 procedure TForm64.ComboColorBox1Change(Sender: TObject); var H,S,L : single; begin RGBtoHSL(RectangleTest.Fill.Color,H, S, L); if l>0.30 then TextTest.TextSettings.FontColor:=TAlphaColorRec.Black else TextTest.TextSettings.FontColor:=TAlphaColorRec.White; end;
pourquoi 0.30 ? Je me suis basé sur ce graphique

Améliorations

Bonjour,

À partir de mes constatations sur HSL j'en suis à cette fonction
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 function TextColor(const BackGround: TAlphaColor; const Range: Single = 0.3; const TextColor : TAlphaColor = TAlphacolorRec.Black; const ReverseColor: TAlphaColor = TAlphacolorRec.White): TAlphaColor; var H,S,L : single; TextL : single; begin // prise en compte de la couleur TextColor ? RGBtoHSL(TextColor,H, S, TextL); // prise en compte de la couleur ReverseColor ? RGBtoHSL(BackGround,H, S, L); if L>Range then result:=TextColor else Result:=ReverseColor; end;
Maintenant les questions qui se posent :
Comment prendre en compte des couleurs de texte différentes (en exemple TextColor= TAlphacolorRec.Red)
Tout ces "calculs" se font sans compter sur la transparence comment intégrer celle-ci ?

Tout est, je pense, dans la condition. Une question de fourchette de valeurs mais peut-être aussi des tests sur les Teintes (H) et Saturation (S) ?
J'ai cet article comme base de travail. Des idées à me soumettre ?

Vous retrouverez les sources et l'exécutable ici

23/10/2019, 12h59
Jipété

Salut,

Citation:

Envoyé par SergioMaster

Maintenant les questions qui se posent :
Comment prendre en compte des couleurs de texte différentes (en exemple TextColor := TAlphacolorRec.Red)

On a discuté de ça pendant un an, dans un sous-forum voisin, ça a commencé comme toi avec du texte en noir et blanc et ça a fini avec la couleur, mais il y en a 7 pages pleines à bloc de codes, d'images, de discussions, etc., et au bout du compte il ne peut pas y avoir de méthode fiable à 100 %, il y aura toujours, à certaines valeurs, des "à peu près", c'est comme ça, c'est la vie.

Citation:

Envoyé par SergioMaster

Tous ces "calculs" se font sans compter sur la transparence ; comment intégrer celle-ci ?

Pour la transparence, ce n'est qu'un artifice, au bout du compte l'écran affiche toujours une couleur R G B : je n'ai jamais vu de dalle transparente, encore moins de tube cathodique transparent, à l'époque où ces engins existaient.

Un dernier mot à propos du lien que tu donnes, agréable à lire, mais une remarque : j'ai souvent vu les cercles chromatiques démarrer avec le rouge à "3 heures" et tourner dans le sens inverse des aiguilles d'une montre, alors méfiance !
Certains codes se basent là-dessus (je pense à l'excellent site d'EFG, et il y en a d'autres).
23/10/2019, 16h29
SergioMaster

Bonsoir,

Citation:

Envoyé par Jipété

On a discuté de ça pendant un an, dans un sous-forum voisin,

Mais c'est une mine ce forum ! Je ne connaissais pas, merci pour toute cette lecture

Citation:

il y aura toujours, à certaines valeurs, des "à peu près", c'est comme ça, c'est la vie.

j'en suis conscient

Citation:

Pour la transparence, ce n'est qu'un artifice, au bout du compte l'écran affiche toujours une couleur R G B

bon, en faisant une recherche par parentèle genre si la transparence est < à un seuil alors prendre la couleur du parent (en récursif histoire de faire mumuse) ça doit pouvoir le faire

Citation:

Un dernier mot à propos du lien que tu donnes, agréable à lire

c'est pour cela que je l'ai cité

Citation:

Certains codes se basent là-dessus (je pense à l'excellent site d'EFG, et il y en a d'autres).

et zut, je n'ai même pas pensé à fouiller sur efg2.com

1 pièce(s) jointe(s)

état d'avancement

J'en suis là, une écriture de fonction

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
  function TextColor(const BackGround: TAlphaColor; const Delta: Single = 0.3;
  const TextColor : TAlphaColor = TAlphacolorRec.Black;
  const ReverseColor: TAlphaColor = TAlphacolorRec.White): TAlphaColor;
  var H,S,L : single;
    D,TextS,TextL : single;
 
  begin
    D:=Delta;
    if D>0.5 then D:=0.5;
    if D<0 then D:=0;
 
    RGBtoHSL(BackGround,H, S, L);
    if (L>D)
      then result:=TextColor
      else Result:=ReverseColor;
  // insuffisant j'ai donc ajouté un test
   if SubtractColor(BackGround,Result)<=$FF then result:=ReverseColor;  // $FF pour noir et blanc mais ... 
  end;

et une application
Pièce jointe 514199
Cela me convient en cas de couleur de fonte noir/blanc, à faire, d'autres tests

nota : efg2.com a été versé aux abonnés absents :weird:

31/10/2019, 17h13
qi130

Hello Serge,
En marge (?) de ton sujet, peut-être quelques idées à prendre ici:
https://snook.ca/technical/colour_contrast/colour.html
http://paletton.com
https://www.colourlovers.com/

Tout est très orienté web et ergonomie de site, mais tu sembles avoir la même problématique :roll:
31/10/2019, 19h22
Jipété

1 pièce(s) jointe(s)

Citation:

Envoyé par SergioMaster

nota : efg2.com a été versé aux abonnés absents :weird:

Non non, ça fonctionne son truc, mais c'est très mal fichu...

Exemple en suivant le lien "Reference Library" depuis son site : je me retrouve sur la Wayback Machine, il y a un calendrier, des jours y sont en surbrillance (avec un rond bleu), y a qu'à mettre la souris sur le plus récent, une infobulle s'affiche avec une heure sous forme de lien, le cliquer et hop ! :

Pièce jointe 514369

Et en cliquant sur "Color" par exemple, je retrouve le bazar au format efg habituel.

---
Sinon, elle est bizarre ta capture d'écran : à gauche une police sans sérif très lisible sur écran, et à droite une police avec sérif, beaucoup plus brouillon et empâtée : ça impacte la lisibilité…
01/11/2019, 08h26
SergioMaster

Citation:

Envoyé par Jipété

Sinon, elle est bizarre ta capture d'écran : à gauche une police sans sérif très lisible sur écran, et à droite une police avec sérif, beaucoup plus brouillon et empâtée : ça impacte la lisibilité…

C'est juste une histoire de fonte non identique dans mon style, rein à voir avec le "calcul"