Έλεγχος αντίθεσης χρωμάτων

Ελέγξτε την αντίθεση προσκηνίου/φόντου έναντι των WCAG AA και AAA. Δείτε την ενημέρωση της αναλογίας καθώς επιλέγετε χρώματα.

Color Contrast Checker

Live

Foreground (text)

Background

17.85:1

Contrast ratio

AA normal: PassAA large: PassAAA normal: PassAAA large: Pass

Readable headline sample

Body text at normal size should stay clear against this background. Adjust colors until WCAG targets pass.

Small caption text for density checks.

CSS output

color: #0f172a;
background-color: #ffffff;
/* contrast ratio: 17.85:1 */

Key capabilities

Ελέγξτε την αντίθεση προσκηνίου/φόντου σύμφωνα με τις οδηγίες WCAG AA και AAA.
Εκτελείται στο πρόγραμμα περιήγησής σας
Δωρεάν για χρήση

Πώς να χρησιμοποιήσεις

Επιλέξτε χρώματα κειμένου (προσκηνίου) και φόντου.
Διαβάστε την αναλογία αντίθεσης και τα αποτελέσματα ΑΑ/ΑΑΑ.
Προσαρμόστε μέχρι να περάσετε το επίπεδο-στόχο σας.

How this tool works

Επιλέξτε χρώματα κειμένου (προσκηνίου) και φόντου.
Διαβάστε την αναλογία αντίθεσης και τα αποτελέσματα ΑΑ/ΑΑΑ.
Προσαρμόστε μέχρι να περάσετε το επίπεδο-στόχο σας.

Recommended settings

Χρησιμοποιήστε πρώτα τις προεπιλεγμένες επιλογές και μετά προσαρμόστε εάν χρειάζεται

Supported formats

Text / on-page input

File size and limits

Οι πολύ περίπλοκες προεπισκοπήσεις πολλαπλών επιπέδων ενδέχεται να είναι πιο αργές σε παλαιότερα τηλέφωνα.

Privacy

Οι γεννήτριες χρωμάτων και CSS εκτελούνται εξ ολοκλήρου στο πρόγραμμα περιήγησής σας. Οι προεπισκοπήσεις και οι μετατροπές δεν ανεβάζουν ποτέ τα στυλ σας.

Common use cases

Χρησιμοποιήστε τον Έλεγχο αντίθεσης χρωμάτων όποτε χρειάζεστε: Ελέγξτε την αντίθεση προσκηνίου/φόντου σύμφωνα με τις οδηγίες WCAG AA και AAA.

Troubleshooting

Η προεπισκόπηση φαίνεται διαφορετική μετά την επικόλληση

Ελέγξτε για ανταγωνιστικά CSS στη σελίδα σας (επαναφορά, κληρονομικά χρώματα). Αντιγράψτε πρώτα τον κανόνα που δημιουργήθηκε σε ένα απομονωμένο φύλλο στυλ.

FAQ

Αυτό ανεβάζει το CSS μου;

Όχι. Οι γεννήτριες και οι μετατροπείς εκτελούνται στο πρόγραμμα περιήγησής σας με ζωντανή προεπισκόπηση.

Χρειάζομαι λογαριασμό;

Όχι. Ανοίξτε το εργαλείο, τροποποιήστε τα στοιχεία ελέγχου και αντιγράψτε το CSS.