Update TextBoxPage.xaml to fix color contrast ratio #868
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
marcelwgn
reviewed
Feb 10, 2022
| @@ -34,14 +34,14 @@ | |||
| </local:ControlExample> | |||
| <local:ControlExample x:Name="Example3" HeaderText="A read-only TextBox with various properties set."> | |||
| <TextBox Text="I am super excited to be here!" IsReadOnly="True" FontFamily="Arial" FontSize="24" | |||
| FontStyle="Italic" CharacterSpacing="200" Foreground="CornflowerBlue" | |||
| FontStyle="Italic" CharacterSpacing="200" Foreground="#669DFF" | |||
There was a problem hiding this comment.
It seems that this color does not have sufficient contrast in light theme:
There was a problem hiding this comment.
Good catch Marcel! Thanks for the feedback. Do you know what color would work for both light and dark themes? I tried to find one that worked for both but I don't think that it is possible. Wondering if there is a way to change the color based on the theme. Let me know what you think.
There was a problem hiding this comment.
I am not entirely sure if there is a color that would have a contrast ratio of 4.5 to both the light and dark background. Alternatively, we could use a theme resource that would change colors based on theme. If you like, I can also dig deeper and try to find a color that could fit the criteria.
There was a problem hiding this comment.
One thing that just came to mind is if we actually need to meet the 4.5 contrast ratio of if the 3.0 ratio is enough since we have a large font size here.
There was a problem hiding this comment.
That's a good point. In this case I believe that #5178BE should be good for both light and dark modes.
Let me know what you think :)
There was a problem hiding this comment.
That color looks good to me!
There was a problem hiding this comment.
Just updated the color code :)
There was a problem hiding this comment.
Oh right, guess I was a bit to eager to approve the PR. LGTM to me now :)
marcelwgn
approved these changes
Feb 11, 2022
bpulliam
pushed a commit
that referenced
this pull request
Apr 20, 2022
* Update TextBoxPage.xaml * Update TextBoxPage.xaml
bpulliam
added a commit
that referenced
this pull request
Apr 20, 2022
* cp from lifted commit 211b190f0e2b6804eabe7bbac5960746c614a2a4 * cp from lifted commit d5f51fa8e92927fb27e2b9cbb683e3b534a2617c * selected cp from lifted b3dc0e88eb67f7fae069308bd0bacd1fa9b2000c so that gh and lifted match * Fix issue with groups not having appropriate UIA name (#523) * misc cleanup from lifted * Update TextBoxPage.xaml to fix color contrast ratio (#868) * Update TextBoxPage.xaml * Update TextBoxPage.xaml Co-authored-by: Marcel Wagner <marcel.alex.wagner@outlook.com> Co-authored-by: Greg Woo <90726278+gregwoo-microsoft@users.noreply.github.com>
bpulliam
pushed a commit
that referenced
this pull request
Nov 11, 2022
* Fix incorrect InfoBadgePage.xaml xaml source code string * Removed spaces * Add adjustable slider properties in slider example * Place property settings in local:ControlExample.Options, use binding instead of event handlers * Add minimum width -> grid in SliderPage.xaml, add AutomationProperties * Change AutomationProperties.LabeledBy -> AutomationProperties.Name * Small typo * Change AutomationProperties * Included min for step frequency + added snapping property to tick mark sample * Squashed commit of the following: commit f75c752 Author: Sam <35312698+Samuel12321@users.noreply.github.com> Date: Fri Jun 17 10:37:07 2022 +1200 - ARM64 configuration added (#1014) - Nuget packages updated to versions which support arm64 Co-authored-by: Sam <samuelg12321@hotmail.com> commit 38db21a Merge: 55af91f c67b3ff Author: Karen Lai <7976322+karenbtlai@users.noreply.github.com> Date: Tue Jun 14 12:01:29 2022 -0700 Merge pull request #1007 from microsoft/user/karenlai/CleanUpResources [winui2] Remove Unused Resources in `App.xaml` commit c67b3ff Author: Karen Lai <biilai@microsoft.com> Date: Mon Jun 13 11:09:00 2022 -0700 revert resource commit 6b01046 Author: Karen Lai <biilai@microsoft.com> Date: Fri Jun 10 13:57:45 2022 -0700 remove unused resources commit 55af91f Author: Greg Woo <90726278+gregwoo-microsoft@users.noreply.github.com> Date: Wed Jun 1 12:38:14 2022 -0700 Update ListViewSample2_xaml.txt (#980) commit 4688b44 Author: Greg Woo <90726278+gregwoo-microsoft@users.noreply.github.com> Date: Fri May 20 11:18:23 2022 -0700 Store update commit f9d4415 Author: Greg Woo <90726278+gregwoo-microsoft@users.noreply.github.com> Date: Thu May 19 16:38:18 2022 -0700 Store Update (#952) * Store update - also fixed bug with infobadge * Update protocol launcher to work with doc pages commit d906af8 Author: Greg Woo <90726278+gregwoo-microsoft@users.noreply.github.com> Date: Mon May 16 04:15:36 2022 -0700 Name change XCG --> WinUI 2 Gallery (#943) * Name change XCG --> WinUI 2 Gallery * Fixed some names (WinUI 2 Gallery --> WinUI Gallery) * move XamlControlsGallery directory to WinUIGallery Co-authored-by: bpulliam@microsoft.com <bpulliam@microsoft.com> commit ad4c20c Author: Greg Woo <90726278+gregwoo-microsoft@users.noreply.github.com> Date: Sun May 15 04:15:00 2022 -0700 WinUI 2 Gallery Visual Revamp (#934) * add imageIconPath * home page update layout * add uri * update more icons on home page * main banner placement update * add subtitle * update header tiles * update icons * update all controls page * update info badge * update narrow width view * update header tile image * add newest icons! * Added template studio link + fixed some bugs - Added template studio tile - App title changing to white in dark mode --> now always black - Changed sized of tiles - Changed color of tiles to work in light + dark mode - Updated corner radius * Updated the title name * Update XamlControlsGallery/App.xaml Co-authored-by: Marcel Wagner <marcel.alex.wagner@outlook.com> * Fixed headers - removed interactions to be more consistent with WinUI 3 Gallery + interactions were often laggy - made text black for both light and dark modes * Additional few tweaks Co-authored-by: Karen Lai <biilai@microsoft.com> Co-authored-by: Karen Lai <7976322+karenbtlai@users.noreply.github.com> Co-authored-by: Marcel Wagner <marcel.alex.wagner@outlook.com> Co-authored-by: Bob Pulliam <bpulliam@microsoft.com> commit c23c72c Author: Greg Woo <90726278+gregwoo-microsoft@users.noreply.github.com> Date: Thu May 12 17:30:53 2022 -0700 Update PipsPagerPage.xaml.cs used the right pictures commit 6acd42b Author: Greg Woo <90726278+gregwoo-microsoft@users.noreply.github.com> Date: Wed May 11 23:03:11 2022 -0700 Update PipsPagerPage.xaml.cs (#936) commit 09e8d84 Author: Tony Tkachenko <103267335+tonytkachenko@users.noreply.github.com> Date: Sun May 1 17:06:33 2022 +0300 Fix BreadcrumbBar opening tag in exapmle (#906) commit e23b599 Merge: 30329e9 28b2330 Author: Karen Lai <7976322+karenbtlai@users.noreply.github.com> Date: Mon Apr 11 17:11:42 2022 -0700 Merge pull request #874 from microsoft/user/karenlai/TabViewTearSampleUpdate Fix TabView Sample Tear Behaviour Bug commit 30329e9 Merge: e97be1e 0285e4a Author: Ranjesh <28935693+ranjeshj@users.noreply.github.com> Date: Wed Apr 6 12:42:43 2022 -0700 Merge pull request #895 from microsoft/user/ranjeshj/a11yfixes Fixing a few a11y issues in the app commit 0285e4a Author: Ranjesh Jaganathan <28935693+ranjeshj@users.noreply.github.com> Date: Tue Apr 5 14:41:34 2022 -0700 fixing a few a11y issues commit e97be1e Author: Bob Pulliam <bpulliam@gmail.com> Date: Tue Mar 15 17:52:14 2022 -0400 Change ItemInvoked->SelectionChanged on NavigationRootPage (#880) commit 19b9cf0 Author: Marcel Wagner <marcel.alex.wagner@outlook.com> Date: Fri Mar 11 01:24:45 2022 +0100 Remove dead code in settingspage class (#875) * Remove dead code in settingspage class * Removed another unused function * Revert "Removed another unused function" This reverts commit c7c170b. Co-authored-by: Greg Woo <90726278+gregwoo-microsoft@users.noreply.github.com> commit 28b2330 Author: Karen Lai <biilai@microsoft.com> Date: Thu Feb 17 13:52:10 2022 -0800 fix window crashing on last tab drag commit b4f8c16 Author: Greg Woo <90726278+gregwoo-microsoft@users.noreply.github.com> Date: Mon Feb 14 10:03:33 2022 -0800 Update TextBoxPage.xaml to fix color contrast ratio (#868) * Update TextBoxPage.xaml * Update TextBoxPage.xaml commit dfa35dc Author: Marcel Wagner <marcel.alex.wagner@outlook.com> Date: Mon Jan 31 01:14:09 2022 +0100 Add separator between code samples, update code copy button to be on title line (#854) commit ec2f5ad Author: Marcel Wagner <marcel.alex.wagner@outlook.com> Date: Sat Jan 29 02:12:22 2022 +0100 Fix issue for markers on whats new page in high contrast (#852) commit ead12ab Author: Marcel Wagner <marcel.alex.wagner@outlook.com> Date: Sat Jan 29 02:08:25 2022 +0100 Add expander for sample code of control examples (#850) commit 504ea7c Author: Stephen L Peters <stpete@microsoft.com> Date: Fri Jan 28 10:22:11 2022 -0800 Update winui version to 2.8.0-prerelease.220118001 (#842) commit 0ffb849 Author: Teemu Latonen <teemu.p.latonen@gmail.com> Date: Tue Jan 25 01:51:25 2022 +0200 Update ItemsRepeaterPage.xaml (#848) Dash is on the wrong end of the closing tag. Only affects the displayed example code. XAML was correct in the functional code. commit ee772e5 Author: Marcel Wagner <marcel.alex.wagner@outlook.com> Date: Sat Jan 22 02:39:46 2022 +0100 Fix issue with compact NavView InfoBadge sample (#846) commit e2e2ead Author: Stephen L Peters <stpete@microsoft.com> Date: Tue Jan 11 14:48:56 2022 -0800 Fix splitbutton keyboard accessability. (#840) * Fix issue where splitbutton flyout content wasn't invokable by keyboard. * Removed commented code. commit 7690b07 Author: Greg Woo <90726278+gregwoo-microsoft@users.noreply.github.com> Date: Fri Jan 7 16:21:57 2022 -0800 Update README.md commit 2ed19f0 Author: Greg Woo <90726278+gregwoo-microsoft@users.noreply.github.com> Date: Fri Jan 7 16:20:08 2022 -0800 Update XamlGalleryLanding.PNG commit c473598 Author: hassaanmasood <58418307+hassaanmasood@users.noreply.github.com> Date: Wed Jan 5 01:29:46 2022 +0500 Fixed NavigationView PaneOpening Event Name (#837) * Fixed NavigationView PaneOpening Event Naming * Revert "Fixed NavigationView PaneOpening Event Naming" This reverts commit 04c18c3. * Fixed NavigationView PaneOpening Event Naming commit b98c2c9 Author: Marcel Wagner <marcel.alex.wagner@outlook.com> Date: Tue Jan 4 21:16:49 2022 +0100 Fix faulty sample code (#835) commit 3acf32c Author: Marvin Rühe <Marv51@users.noreply.github.com> Date: Wed Dec 15 19:29:15 2021 +0100 Remove misleading dead code (#832) Thank you @Marv51 for your contribution! We really appreciate it. commit e2b761c Author: Greg Woo <90726278+gregwoo-microsoft@users.noreply.github.com> Date: Mon Dec 6 17:40:47 2021 -0800 Updated to 1.2.22 * Remove LargeChange in slider example * Fix compile error Co-authored-by: Greg Woo <90726278+gregwoo-microsoft@users.noreply.github.com> Co-authored-by: Marcel Wagner <marcel.alex.wagner@outlook.com>
Mickael0686
pushed a commit
to Mickael0686/WinUI-Gallery
that referenced
this pull request
Jul 23, 2023
…ce8b742503a97Add adjustable slider properties in the slider example (microsoft#831) * Fix incorrect InfoBadgePage.xaml xaml source code string * Removed spaces * Add adjustable slider properties in slider example * Place property settings in local:ControlExample.Options, use binding instead of event handlers * Add minimum width -> grid in SliderPage.xaml, add AutomationProperties * Change AutomationProperties.LabeledBy -> AutomationProperties.Name * Small typo * Change AutomationProperties * Included min for step frequency + added snapping property to tick mark sample * Squashed commit of the following: commit f75c752 Author: Sam <35312698+Samuel12321@users.noreply.github.com> Date: Fri Jun 17 10:37:07 2022 +1200 - ARM64 configuration added (microsoft#1014) - Nuget packages updated to versions which support arm64 Co-authored-by: Sam <samuelg12321@hotmail.com> commit 38db21a Merge: 55af91f c67b3ff Author: Karen Lai <7976322+karenbtlai@users.noreply.github.com> Date: Tue Jun 14 12:01:29 2022 -0700 Merge pull request microsoft#1007 from microsoft/user/karenlai/CleanUpResources [winui2] Remove Unused Resources in `App.xaml` commit c67b3ff Author: Karen Lai <biilai@microsoft.com> Date: Mon Jun 13 11:09:00 2022 -0700 revert resource commit 6b01046 Author: Karen Lai <biilai@microsoft.com> Date: Fri Jun 10 13:57:45 2022 -0700 remove unused resources commit 55af91f Author: Greg Woo <90726278+gregwoo-microsoft@users.noreply.github.com> Date: Wed Jun 1 12:38:14 2022 -0700 Update ListViewSample2_xaml.txt (microsoft#980) commit 4688b44 Author: Greg Woo <90726278+gregwoo-microsoft@users.noreply.github.com> Date: Fri May 20 11:18:23 2022 -0700 Store update commit f9d4415 Author: Greg Woo <90726278+gregwoo-microsoft@users.noreply.github.com> Date: Thu May 19 16:38:18 2022 -0700 Store Update (microsoft#952) * Store update - also fixed bug with infobadge * Update protocol launcher to work with doc pages commit d906af8 Author: Greg Woo <90726278+gregwoo-microsoft@users.noreply.github.com> Date: Mon May 16 04:15:36 2022 -0700 Name change XCG --> WinUI 2 Gallery (microsoft#943) * Name change XCG --> WinUI 2 Gallery * Fixed some names (WinUI 2 Gallery --> WinUI Gallery) * move XamlControlsGallery directory to WinUIGallery Co-authored-by: bpulliam@microsoft.com <bpulliam@microsoft.com> commit ad4c20c Author: Greg Woo <90726278+gregwoo-microsoft@users.noreply.github.com> Date: Sun May 15 04:15:00 2022 -0700 WinUI 2 Gallery Visual Revamp (microsoft#934) * add imageIconPath * home page update layout * add uri * update more icons on home page * main banner placement update * add subtitle * update header tiles * update icons * update all controls page * update info badge * update narrow width view * update header tile image * add newest icons! * Added template studio link + fixed some bugs - Added template studio tile - App title changing to white in dark mode --> now always black - Changed sized of tiles - Changed color of tiles to work in light + dark mode - Updated corner radius * Updated the title name * Update XamlControlsGallery/App.xaml Co-authored-by: Marcel Wagner <marcel.alex.wagner@outlook.com> * Fixed headers - removed interactions to be more consistent with WinUI 3 Gallery + interactions were often laggy - made text black for both light and dark modes * Additional few tweaks Co-authored-by: Karen Lai <biilai@microsoft.com> Co-authored-by: Karen Lai <7976322+karenbtlai@users.noreply.github.com> Co-authored-by: Marcel Wagner <marcel.alex.wagner@outlook.com> Co-authored-by: Bob Pulliam <bpulliam@microsoft.com> commit c23c72c Author: Greg Woo <90726278+gregwoo-microsoft@users.noreply.github.com> Date: Thu May 12 17:30:53 2022 -0700 Update PipsPagerPage.xaml.cs used the right pictures commit 6acd42b Author: Greg Woo <90726278+gregwoo-microsoft@users.noreply.github.com> Date: Wed May 11 23:03:11 2022 -0700 Update PipsPagerPage.xaml.cs (microsoft#936) commit 09e8d84 Author: Tony Tkachenko <103267335+tonytkachenko@users.noreply.github.com> Date: Sun May 1 17:06:33 2022 +0300 Fix BreadcrumbBar opening tag in exapmle (microsoft#906) commit e23b599 Merge: 30329e9 28b2330 Author: Karen Lai <7976322+karenbtlai@users.noreply.github.com> Date: Mon Apr 11 17:11:42 2022 -0700 Merge pull request microsoft#874 from microsoft/user/karenlai/TabViewTearSampleUpdate Fix TabView Sample Tear Behaviour Bug commit 30329e9 Merge: e97be1e 0285e4a Author: Ranjesh <28935693+ranjeshj@users.noreply.github.com> Date: Wed Apr 6 12:42:43 2022 -0700 Merge pull request microsoft#895 from microsoft/user/ranjeshj/a11yfixes Fixing a few a11y issues in the app commit 0285e4a Author: Ranjesh Jaganathan <28935693+ranjeshj@users.noreply.github.com> Date: Tue Apr 5 14:41:34 2022 -0700 fixing a few a11y issues commit e97be1e Author: Bob Pulliam <bpulliam@gmail.com> Date: Tue Mar 15 17:52:14 2022 -0400 Change ItemInvoked->SelectionChanged on NavigationRootPage (microsoft#880) commit 19b9cf0 Author: Marcel Wagner <marcel.alex.wagner@outlook.com> Date: Fri Mar 11 01:24:45 2022 +0100 Remove dead code in settingspage class (microsoft#875) * Remove dead code in settingspage class * Removed another unused function * Revert "Removed another unused function" This reverts commit c7c170b. Co-authored-by: Greg Woo <90726278+gregwoo-microsoft@users.noreply.github.com> commit 28b2330 Author: Karen Lai <biilai@microsoft.com> Date: Thu Feb 17 13:52:10 2022 -0800 fix window crashing on last tab drag commit b4f8c16 Author: Greg Woo <90726278+gregwoo-microsoft@users.noreply.github.com> Date: Mon Feb 14 10:03:33 2022 -0800 Update TextBoxPage.xaml to fix color contrast ratio (microsoft#868) * Update TextBoxPage.xaml * Update TextBoxPage.xaml commit dfa35dc Author: Marcel Wagner <marcel.alex.wagner@outlook.com> Date: Mon Jan 31 01:14:09 2022 +0100 Add separator between code samples, update code copy button to be on title line (microsoft#854) commit ec2f5ad Author: Marcel Wagner <marcel.alex.wagner@outlook.com> Date: Sat Jan 29 02:12:22 2022 +0100 Fix issue for markers on whats new page in high contrast (microsoft#852) commit ead12ab Author: Marcel Wagner <marcel.alex.wagner@outlook.com> Date: Sat Jan 29 02:08:25 2022 +0100 Add expander for sample code of control examples (microsoft#850) commit 504ea7c Author: Stephen L Peters <stpete@microsoft.com> Date: Fri Jan 28 10:22:11 2022 -0800 Update winui version to 2.8.0-prerelease.220118001 (microsoft#842) commit 0ffb849 Author: Teemu Latonen <teemu.p.latonen@gmail.com> Date: Tue Jan 25 01:51:25 2022 +0200 Update ItemsRepeaterPage.xaml (microsoft#848) Dash is on the wrong end of the closing tag. Only affects the displayed example code. XAML was correct in the functional code. commit ee772e5 Author: Marcel Wagner <marcel.alex.wagner@outlook.com> Date: Sat Jan 22 02:39:46 2022 +0100 Fix issue with compact NavView InfoBadge sample (microsoft#846) commit e2e2ead Author: Stephen L Peters <stpete@microsoft.com> Date: Tue Jan 11 14:48:56 2022 -0800 Fix splitbutton keyboard accessability. (microsoft#840) * Fix issue where splitbutton flyout content wasn't invokable by keyboard. * Removed commented code. commit 7690b07 Author: Greg Woo <90726278+gregwoo-microsoft@users.noreply.github.com> Date: Fri Jan 7 16:21:57 2022 -0800 Update README.md commit 2ed19f0 Author: Greg Woo <90726278+gregwoo-microsoft@users.noreply.github.com> Date: Fri Jan 7 16:20:08 2022 -0800 Update XamlGalleryLanding.PNG commit c473598 Author: hassaanmasood <58418307+hassaanmasood@users.noreply.github.com> Date: Wed Jan 5 01:29:46 2022 +0500 Fixed NavigationView PaneOpening Event Name (microsoft#837) * Fixed NavigationView PaneOpening Event Naming * Revert "Fixed NavigationView PaneOpening Event Naming" This reverts commit 04c18c3. * Fixed NavigationView PaneOpening Event Naming commit b98c2c9 Author: Marcel Wagner <marcel.alex.wagner@outlook.com> Date: Tue Jan 4 21:16:49 2022 +0100 Fix faulty sample code (microsoft#835) commit 3acf32c Author: Marvin Rühe <Marv51@users.noreply.github.com> Date: Wed Dec 15 19:29:15 2021 +0100 Remove misleading dead code (microsoft#832) Thank you @Marv51 for your contribution! We really appreciate it. commit e2b761c Author: Greg Woo <90726278+gregwoo-microsoft@users.noreply.github.com> Date: Mon Dec 6 17:40:47 2021 -0800 Updated to 1.2.22 * Remove LargeChange in slider example * Fix compile error Co-authored-by: Greg Woo <90726278+gregwoo-microsoft@users.noreply.github.com> Co-authored-by: Marcel Wagner <marcel.alex.wagner@outlook.com>#### <TargetFrameworkVersion>v4.5</TargetFrameworkVersion> <TargetFrameworkVersion>v4.8</TargetFrameworkVersion> <TargetFrameworkVersion>v4.8</TargetFrameworkVersion> Merge branch 'main' into user/praanan/unpackaged-appupdate version to 2.8 stable
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Fixes #867
Motivation and Context
How Has This Been Tested?
Screenshots (if appropriate):
Types of changes